Javascript 如何将重叠标记器与react传单一起使用?
我正在将现有web应用程序重写为React应用程序。在原始版本中,用于地图,以及 创建地图标记之间的区别。在新的应用程序中,我正在使用。使用的所有其他插件都可用于响应,但我想为OverlappingMarkersPiderFire创建一个传单自定义组件。我对创建这个组件有点力不从心 理想情况下,我希望在React render循环中这样调用组件Javascript 如何将重叠标记器与react传单一起使用?,javascript,react-leaflet,Javascript,React Leaflet,我正在将现有web应用程序重写为React应用程序。在原始版本中,用于地图,以及 创建地图标记之间的区别。在新的应用程序中,我正在使用。使用的所有其他插件都可用于响应,但我想为OverlappingMarkersPiderFire创建一个传单自定义组件。我对创建这个组件有点力不从心 理想情况下,我希望在React render循环中这样调用组件 return ( <Map> <Spiderfy > <Marker> &l
return (
<Map>
<Spiderfy >
<Marker>
<Popup>
</Popup>
</Marker>
<Marker>
<Popup>
</Popup>
</Marker>
</Spiderfy>
</Map>
)
这是我目前拥有的包装器。它呈现子对象(所有标记及其弹出窗口),但单击映射时不会执行事件侦听器。我也不知道如何从子列表中获取标记对象并将其添加到oms实例
有人对创建这个类或其他类似的库有什么建议吗?您已经足够接近了,下面是一个更新的组件版本,它演示了如何集成到 缺失零件清单:
- 通过
方法从标记列表初始化OverlappingMarkerSpiderfier.addMarker
- 事件处理程序实现
作为参考是否可以使用通常用于平移的FeatureGroup?它现在出错了。嘿@LouisChristopher,这个错误似乎是由重叠的marker spiderfier传单引起的,也许你可以在这方面提出一个单独的问题?当然,谢谢你的快速回复,我已经发布了一个。:)是否可以与最新的react手册v3一起使用~/Spiderfy.js(9:40)类扩展中的代码>错误未定义的值不是构造函数或null谢谢
class _Spiderfy extends MapLayer {
constructor(props) {
super(props)
this.oms = null
}
createLeafletElement ({children, leaflet: {map, ...props}}) {
let newLayer = L.featureGroup()
this.oms = new OverlappingMarkerSpiderfier(map);
var popup = new L.Popup();
this.oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
this.oms.addListener('spiderfy', function(markers) {
map.closePopup();
});
return newLayer
}
}
export default withLeaflet(_Spiderfy);
class Spiderfy extends MapLayer {
createLeafletElement(props) {
const { map } = props.leaflet;
this.oms = this.createOverlappingMarkerSpiderfier(map);
const el = L.layerGroup();
this.contextValue = { ...props.leaflet, layerContainer: el };
return el;
}
componentDidMount() {
super.componentDidMount();
this.leafletElement.eachLayer(layer => {
if (layer instanceof L.Marker) {
this.oms.addMarker(layer);
}
});
}
createOverlappingMarkerSpiderfier(map) {
const oms = new window.OverlappingMarkerSpiderfier(map);
oms.addListener("spiderfy", markers => {
markers.forEach(m => m.closePopup())//force to close popup
if (this.props.onSpiderfy) this.props.onSpiderfy(markers);
});
oms.addListener("unspiderfy", markers => {
if (this.props.onUnspiderfy) this.props.onUnspiderfy(markers);
});
oms.addListener("click", marker => {
if (this.props.onClick) this.props.onClick(marker);
});
return oms;
}
}
export default withLeaflet(Spiderfy);