我可以将OverlappingMarkerSpiderfier与react-google-maps一起使用吗? [英] Can I use OverlappingMarkerSpiderfier with react-google-maps?
问题描述
我正在研究一个使用react-google-maps
( https://github的项目. com/tomchentw/react-google-maps )库.
I'm working on a project which uses react-google-maps
(https://github.com/tomchentw/react-google-maps) library.
效果很好,但是我们偶然发现了标记重叠的问题.解决此问题的理想方法是使用此插件: https://github.com/jawj/OverlappingMarkerSpiderfier.
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.
有什么办法可以和react-google-maps
一起使用吗?
Is there any way to use it with react-google-maps
?
推荐答案
如何 OverlappingMarkerSpiderfier
插件集成到 react-google-maps
1)安装npm-overlapping-marker-spiderfier
软件包:npm i npm-overlapping-marker-spiderfier
2)一旦安装,以下组件将演示如何创建OverlappingMarkerSpiderfier类的实例并通过标记:
2) once installed the following component demonstrates how to create the instance of OverlappingMarkerSpiderfier class and pass markers:
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>
此处是演示供您参考
这篇关于我可以将OverlappingMarkerSpiderfier与react-google-maps一起使用吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!