react/caka地図API-アドレス検索

地図を手に入れたら、まず最初にしなければならないのは
アドレス検索時に地図をその位置に移動する機能.
RealtKaKaoMapSDKはキーワード場所検索機能しかありません.
アドレス検索機能がないため、KakaoMapapiの場所を住所別に表示を参照して作成
でも作ってみたらキーワード+アドレス
コードstaitsのようなキーワードを検索すると、アドレスは移動しません.
だからそれを住所にして、キーワードに変えます.
まず2つのコードを全部記録します.

👉 場所をアドレスに移動

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の代わりにココアサービスライブラリの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>
)