有没有一种方法可以使用react传单库使传单弹出响应

Question

我一直在研究，我知道leafletjs有这个插件https://github.com/yafred/leaflet-responsive-popup但我需要一个变通办法，我正在使用的图书馆反应传单。

react传单上有很多第三方插件，但我看不到任何适合我的插件。如果有人知道或曾经做过这样的事情，如果你能分享一下，那就太酷了。我很难接受。

谢谢。

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/leaflet@1.6/dist/images/marker-icon.png",
shadowUrl: "https://unpkg.com/leaflet@1.5.0/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>
);

编辑要使插件在外部包装组件中独立，您可以有一个ResponsivePopup包装文件：

const ResponsivePopup = () => {
const { map } = useLeaflet();
console.log(map);
useEffect(() => {
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 null;
};

这一次，您将使用react传单库提供的useLeaflet钩子获得地图参考，然后您对第一个解决方案采取类似的操作。这一次你的地图或应用程序将变成这样：

<Map center={position} 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'
/>
// here use your custom wrapper for responsive popup
<ResponsivePopup />
</Map>

演示