我在使用react-google-maps lib时遇到问题。 同时使用MarkerClusterer和Spiderfy可以非常平滑地在相同坐标处显示标记。 但这不能正常工作。 请查看一下并帮助解决此问题。 如果有人在该领域有任何经验,请与我和其他人分享您过去的经验。 谢谢。
Marker.js
onToggleOpen(index) {
const { mapInfoOpenedChangeAction, opened } = this.props;
mapInfoOpenedChangeAction(opened === index ? -1 : index);
}
onMarkerDblClick(ipAddress) {
const { mapMarkerDblClickAction } = this.props;
mapMarkerDblClickAction(ipAddress);
}
render() {
const { cache, search, checkedIPs, opened } = this.props;
this.fetchedData = search
? search.fetchedData
: cache
? cache.fetchedData
: [];
return (
checkedIPs.length !== 0 && (
<MarkerClusterer averageCenter gridSize={50} maxZoom={15}>
<Spiderfy fetchedData={this.fetchedData}>
{this.fetchedData.map((location, index) => {
return (
<Marker
key={index}
title={location.ipAddress}
position={{
lat: location.latitude,
lng: location.longitude
}}
onClick={() => this.onToggleOpen(index)}
onDblClick={() => this.onMarkerDblClick(location.ipAddress)}
>
{opened === index && (
<InfoWindow
position={{
lat: location.latitude,
lng: location.longitude
}}
onCloseClick={() => this.onToggleOpen(index)}
>
<div>
...
</div>
</InfoWindow>
)}
</Marker>
);
})}
</Spiderfy>
</MarkerClusterer>
)
);
Spiderfy.js
constructor(props, context) {
super(props, context);
const oms = require("npm-overlapping-marker-spiderfier/lib/oms.min");
this.oms = new oms.OverlappingMarkerSpiderfier(this.context[MAP], {});
this.markerNodeMounted = this.markerNodeMounted.bind(this);
}
markerNodeMounted(ref) {
const { mapInfoOpenedChangeAction } = this.props;
const marker = ref.state[MARKER];
this.oms.addMarker(marker);
window.google.maps.event.addListener(marker, "spider_click", e => {
if (this.props.onSpiderClick) {
this.props.onSpiderClick(e);
mapInfoOpenedChangeAction(-1);
} else {
const ipAddress = marker.getTitle();
const index = _.findIndex(this.props.fetchedData, {
ipAddress: ipAddress
});
mapInfoOpenedChangeAction(index);
}
});
}
render() {
return React.Children.map(this.props.children, child => {
return React.cloneElement(child, { ref: this.markerNodeMounted });
});
}