如何解决react-leaflet:使用组件作为GeoJSON功能的弹出式窗口
我当前的用例是我想加载GeoJSON数据,并将这些点渲染为地图上的标记。效果很好。
我的下一步是添加一个功能,当单击标记时,该功能将显示一个弹出窗口。该弹出窗口将包含用户可以按下以调用功能的按钮,这些功能由父组件传递给该组件。因此,弹出窗口需要是交互式的。
遗憾的是,将弹出窗口附加到GeoJSON标记的唯一方法是使用onEachFeature
函数,并绑定弹出窗口的呈现的HTML,如下所示:
const popupNode = <MapPopup marker={marker} closePopup={closePopup} />;
const popupText = ReactDOMServer.renderToString(popupNode);
marker.bindPopup(popupText);
使用renderToString
意味着渲染的弹出窗口不是交互式的,因此不能使用按钮和onClick侦听器,也不能调用函数。
我能想到的唯一其他方法是完全独立于地图渲染弹出窗口。拦截弹出事件,获取关联的标记,并在适当的屏幕位置渲染组件,并在用户拖动地图时将其重新对齐。通过完全放弃Leaflet的现有弹出代码来重新设计轮子,这样将是一个巨大的痛苦。
但是,我看不到其他绑定弹出窗口的方法。其他解决方案使用<Popup>
组件,但这需要使用<FeatureGroup>
组件,这意味着放弃<GeoJSON>
组件。
解决方法
我最终放弃了 GeoJSON 组件并使用了 Popup 组件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。