React / 카카오 지도 API - 주소 검색

지도를 가져오고 나서 첫번째로 해야 될 것은
주소를 검색했을 때 그 위치로 지도를 움직이는 기능이었다

ReactKakaoMapSDK에는 키워드 장소 검색 기능만 있고
주소 검색기능이 없어서 kakaoMapApi 의 주소로 장소 표시하기를 참고해서 작성했다

그런데 막상 만들고 보니 키워드는 키워드 + 주소 이고
주소는 코드스테이츠 같은 키워드를 검색하면 이동이 되지 않았다

그래서 주소로 만들고 나서 다시 키워드로 변경했다
일단 두가지의 코드를 전부 기록해 두자

👉 주소로 장소 이동

input창에 주소를 입력하고 버튼을 클릭하면 그 주소로 지도가 이동하게 만들었다

주소 검색에는 Geocoder라는 주소를 좌표로 변환하거나 좌표를 주소로 변환하여
결과를 SHP 파일로 저장해 주는 툴을 사용한다

광범위하게 주소를 입력하게 되면 결과값이 여러개가 나오기 때문에
제일 첫번째의 주소로 이동시켜 줬다

const [state, setState] = useState({
  // 지도의 초기 위치
  center: { lat: 37.49676871972202, lng: 127.02474726969814 },
  // 지도 위치 변경시 panto를 이용할지(부드럽게 이동)
  isPanto: true,
});
const [searchAddress, SetSearchAddress] = useState();

// 주소 입력후 검색 클릭 시 원하는 주소로 이동
const SearchMap = () => {
  const geocoder = new kakao.maps.services.Geocoder();
  
  let callback = function(result, status) {
    if (status === kakao.maps.services.Status.OK) {
      const newSearch = result[0]
      setState({
        center: { lat: newSearch.y, lng: newSearch.x }
      })
    }
  };
    geocoder.addressSearch(`${searchAddress}`, callback);
  }

const handleSearchAddress = (e) => {
  SetSearchAddress(e.target.value)
}

return (
  ...
<Map // 지도를 표시할 Container
  center={state.center}
  isPanto={state.isPanto}
  style={{
       // 지도의 크기
       width: "100%",
       height: "450px",
      }}
      level={3} // 지도의 확대 레벨
>

<div>
  <input onChange={handleSearchAddress}></input>
  <button onClick={SearchMap}>클릭</button>
</div>
)

👉 키워드로 장소 이동

키워드로 장소 이동하는 방법도 주소와 큰 차이는 없었다
Geocoder 대신 카카오 services 라이브러리의 Places()를 이용한다

const [state, setState] = useState({
  // 지도의 초기 위치
  center: { lat: 37.49676871972202, lng: 127.02474726969814 },
  // 지도 위치 변경시 panto를 이용할지(부드럽게 이동)
  isPanto: true,
});
const [searchAddress, SetSearchAddress] = useState();

// 키워드 입력후 검색 클릭 시 원하는 키워드의 주소로 이동
const SearchMap = () => {
  const ps = new kakao.maps.services.Places()
  const placesSearchCB = function(data, status, pagination) {
    if (status === kakao.maps.services.Status.OK) {
      const newSearch = data[0]
      setState({
        center: { lat: newSearch.y, lng: newSearch.x }
      })
    }
  };
  ps.keywordSearch(`${searchAddress}`, placesSearchCB); 
}

return (
  ...
<Map // 지도를 표시할 Container
  center={state.center}
  isPanto={state.isPanto}
  style={{
       // 지도의 크기
       width: "100%",
       height: "450px",
      }}
      level={3} // 지도의 확대 레벨
>

<div>
  <input onChange={handleSearchAddress}></input>
  <button onClick={SearchMap}>클릭</button>
</div>
)

+ 위도 경도 주소로 변경

  const getAddress = useCallback((lat: number, lng: number) => {
    const geocoder = new window.kakao.maps.services.Geocoder();

    const coord = new window.kakao.maps.LatLng(lat, lng);

    const callback = function (
      result: { address: { address_name: string } }[],
      status: string
    ) {
      if (status === window.kakao.maps.services.Status.OK) {
        console.log(result[0].address.address_name)
      }
    };
    geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
  }, []);