我可以将 OverlappingMarkerSpiderfier 与 react-google-maps 一起使用吗?
Can I use OverlappingMarkerSpiderfier with react-google-maps?
我正在开发一个使用 react-google-maps
(https://github.com/tomchentw/react-google-maps) 库的项目。
它运行良好,但我们偶然发现了重叠标记的问题。我们案例的理想解决方案是使用此插件:https://github.com/jawj/OverlappingMarkerSpiderfier.
有什么方法可以与react-google-maps
一起使用吗?
如何OverlappingMarkerSpiderfier
plugin integrate into react-google-maps
1) 安装 npm-overlapping-marker-spiderfier
包:npm i npm-overlapping-marker-spiderfier
2) 安装后,以下组件将演示如何创建 OverlappingMarkerSpiderfier 实例 class 并传递标记:
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>
Here is a demo供大家参考
我正在开发一个使用 react-google-maps
(https://github.com/tomchentw/react-google-maps) 库的项目。
它运行良好,但我们偶然发现了重叠标记的问题。我们案例的理想解决方案是使用此插件:https://github.com/jawj/OverlappingMarkerSpiderfier.
有什么方法可以与react-google-maps
一起使用吗?
如何OverlappingMarkerSpiderfier
plugin integrate into react-google-maps
1) 安装 npm-overlapping-marker-spiderfier
包:npm i npm-overlapping-marker-spiderfier
2) 安装后,以下组件将演示如何创建 OverlappingMarkerSpiderfier 实例 class 并传递标记:
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>
Here is a demo供大家参考