将传单控制地理编码器与反应传单一起使用

如何解决将传单控制地理编码器与反应传单一起使用

我想使用 react-leaflet 并在其上添加一个地理编码器字段。我发现 leaflet-control-geocoder 看起来很棒，但没有反应包装器可以将它与 react-leaflet 一起使用。任何人都这样做过并且可以共享沙箱吗？或者它可能存在于 GitHub 上而我没有使用正确的关键字？

感谢您的帮助， 最好的问候

解决方法

对于 react-leaflet v.3.x

创建您自己的包装器：

安装leaflet-control-geocoder 并导入其依赖项：

import "leaflet-control-geocoder/dist/Control.Geocoder.css";
import "leaflet-control-geocoder/dist/Control.Geocoder.js";

使用 demo 中的代码构建您的 React 包装器。

function LeafletControlGeocoder() {
  const map = useMap();

  useEffect(() => {
    var geocoder = L.Control.Geocoder.nominatim();
    if (typeof URLSearchParams !== "undefined" && location.search) {
      // parse /?geocoder=nominatim from URL
      var params = new URLSearchParams(location.search);
      var geocoderString = params.get("geocoder");
      if (geocoderString && L.Control.Geocoder[geocoderString]) {
        geocoder = L.Control.Geocoder[geocoderString]();
      } else if (geocoderString) {
        console.warn("Unsupported geocoder",geocoderString);
      }
    }

    L.Control.geocoder({
      query: "",placeholder: "Search here...",defaultMarkGeocode: false,geocoder
    })
      .on("markgeocode",function (e) {
        var latlng = e.geocode.center;
        L.marker(latlng,{ icon })
          .addTo(map)
          .bindPopup(e.geocode.name)
          .openPopup();
        map.fitBounds(e.geocode.bbox);
      })
      .addTo(map);
  },[]);

  return null;
}

将其作为 MapContainer 子项导入

  <MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
     ...
      <LeafletControlGeocoder />
  </MapContainer>

Demo