我正在使用react-google-maps(https://github.com/tomchentw/react-google- maps)库的项目中工作。
react-google-maps
它运作良好,但是我们偶然发现了标记重叠的问题。解决此问题的理想方法是使用此插件:https : //github.com/jawj/OverlappingMarkerSpiderfier。
有什么办法可以使用它react-google-maps吗?
如何将OverlappingMarkerSpiderfier插件集成到react- google-maps
OverlappingMarkerSpiderfier
react- google-maps
1)安装npm-overlapping-marker-spiderfier软件包:npm i npm-overlapping-marker- spiderfier
npm-overlapping-marker-spiderfier
npm i npm-overlapping-marker- spiderfier
2)安装后,以下组件演示了如何创建OverlappingMarkerSpiderfier类的实例并传递标记:
import React from "react"; import PropTypes from "prop-types"; import { MAP, MARKER } from "react-google-maps/lib/constants"; class Spiderfy extends React.Component { static contextTypes = { [MAP]: PropTypes.object }; 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 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); }); } render() { return React.Children.map(this.props.children, child => React.cloneElement(child, { ref: this.markerNodeMounted }) ); } }
用法
<GoogleMap defaultZoom={zoom} defaultCenter={{ lat: center.lat, lng: center.lng }} > <Spiderfy> <Marker position={{ lat: center.lat, lng: center.lng }} /> <Marker position={{ lat: -37.9716929, lng: 144.772958 }} title="Melbourne" /> <Marker position={{ lat: -38.132245, lng: 144.2994245 }} title="Geelong" /> <Marker position={{ lat: -38.2277575, lng: 145.0447435 }} title="Mornington" /> </Spiderfy> </GoogleMap>
这是一个演示供您参考