是否有一种方法可以使用react-leaflet库响应小叶弹出？

Question

我一直在研究，我知道leafletjs具有插件https://github.com/yafred/leaflet-responsive-popup，但是我需要一种针对我正在使用react-leaflet的库的解决方法。

react-leaflet有很多第三方插件，但我看不到任何适合我的东西。如果有人知道如何做或做过这样的事情，那么如果您可以分享的话，那将是很酷的。我很难过这一点。

谢谢。

Answer 1

[安装库，导入js，css获取地图参考，然后渲染标记：

import R from "leaflet-responsive-popup";
import "leaflet-responsive-popup/leaflet.responsive.popup.css";
...
  const position = [51.505, -0.09];
  const mapRef = useRef();

  const icon = L.icon({
    iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
    shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
  });

  useEffect(() => {
    const map = mapRef.current.leafletElement;
    const marker = L.marker([51.5, -0.09], { icon });
    const popup = R.responsivePopup({
      hasTip: true,
      autoPan: true,
      offset: [15, 20]
    }).setContent("A pretty CSS3 responsive popup.<br> Easily customizable.");

    marker.addTo(map).bindPopup(popup);
  }, []);

  return (
    <Map center={position} ref={mapRef} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </Map>
  );

Demo