React에서 Leaflet 제어 지오코더를 사용하는 방법

안녕

이것은 나의 첫 번째 게시물입니다. 반응에서 Open street Map 보기와 함께 leaflet-control-geocoder를 사용하는 방법에 대해 쓰고 싶었습니다.

내 요구 사항은 주어진 주소에서 위도와 경도를 얻는 것입니다.

stackoverflow 및 많은 인터넷 검색을 통해 탐색한 후. 나는 내 문제를 해결하는 것처럼 보이는 https://www.liedman.net/leaflet-control-geocoder/docs/classes/nominatim.html 을 우연히 발견했습니다.

반응 앱 만들기에 추가해야 하는 패키지는 다음과 같습니다.

npm install leaflet react-leaflet leaflet-control-geocoder

나를 위해 일한 코드의 요점은

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-control-geocoder/dist/Control.Geocoder.css";
import "leaflet-control-geocoder/dist/Control.Geocoder.js";
import L from "leaflet";

import icon from "./constants";

// shape of the props
// {
//  positionInfos: [{address: "some address"}]
// }

export default function LeafletControlGeocoder(props) {
  const map = useMap();
  const { positionInfos } = props;

  useEffect(() => {
    // creaet Geocoder nominatim
    var geocoder = L.Control.Geocoder.nominatim();
    // for every positionInfo
    // get the geocordinates of the address in the positionInfo
    // use the latitude and longitude to create a marker
    // and add it the map
    positionInfos.map((positionInfo) => {
      const address = positionInfo.address;
      if (address) {
        geocoder.geocode(address, (resultArray) => {
          if (resultArray.length > 0) {
            const result = resultArray[0];
            const latlng = result.center;
            L.marker(latlng, { icon }).addTo(map).bindPopup(result.name);
            map.fitBounds(result.bbox);
          }
        });
      }
    });
  }, [positionInfos]);

  return null;
}

지도에서 해당 사용법

import { useState, useEffect } from "react";
import { MapContainer, TileLayer } from "react-leaflet";
import LeafletControlGeocoder from "./LeafletControlGeodecoder";

const Map = (props) => {
  const { positionInfos } = props;
  // get the location from geolocation
  const [latLng, setLatLng] = useState({
    lat: 0.0,
    lng: 0.0,
    isLoaded: false,
  });

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setLatLng({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            isLoaded: true,
          });
        },
        (error) => {
          alert(error);
        }
      );
    }
  }, [setLatLng]);

  return (
    <MapContainer center={[latLng.lat, latLng.lng]} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <LeafletControlGeocoder positionInfos={positionInfos} />
    </MapContainer>
  );
};

export default Map;