[英]Can I use OverlappingMarkerSpiderfier with react-google-maps?
I'm working on a project which uses react-google-maps
( https://github.com/tomchentw/react-google-maps ) library. 我正在开发一个使用
react-google-maps
( https://github.com/tomchentw/react-google-maps )库的项目。
It works well, but we stumbled upon a problem with overlapping markers. 它运作良好,但是我们偶然发现了标记重叠的问题。 Ideal solution to our case would be to use this plugin: https://github.com/jawj/OverlappingMarkerSpiderfier .
解决此问题的理想方法是使用此插件: https : //github.com/jawj/OverlappingMarkerSpiderfier 。
Is there any way to use it with react-google-maps
? 有什么办法可以将它与
react-google-maps
吗?
How to OverlappingMarkerSpiderfier
plugin integrate into react-google-maps
如何将
OverlappingMarkerSpiderfier
插件集成到react-google-maps
1)install npm-overlapping-marker-spiderfier
package: npm i npm-overlapping-marker-spiderfier
1)安装
npm-overlapping-marker-spiderfier
软件包: npm i npm-overlapping-marker-spiderfier
2) once installed the following component demonstrates how to create the instance of OverlappingMarkerSpiderfier class and pass markers: 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 })
);
}
}
Usage 用法
<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>
Here is a demo for your reference 这是一个演示供您参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.