当我移动地图时,我有了边界,但我不知道如何获得包含在这些边界内的标记。我不想使用 new google.map...
. 我只想继续使用 React-Google-Map
. 如果这是不可能的,那么我将使用谷歌的实例。
我会在下面发布我的代码。我是控制台登录的参考谷歌地图和道具里面的。onChange
函数。
Props =>
bounds:{nw: {…}, se: {…}, sw: {…}, ne: {…}}
center:{lat: 53, lng: -7.77000000000001}
marginBounds:{nw: {…}, se: {…}, sw: {…}, ne: {…}}
size:{width: 1818, height: 455}
zoom:10
__proto__:Object
Map Ref => GoogleMap {props: {…}, context: {…}, refs: {…}, updater: {…}, _getMinZoom: ƒ, …}
import React, { Component } from 'react';
import GoogleMap from 'google-map-react';
function findMarkerIndex(id, markers) {
for (let i = markers.length; i--; ) {
if (markers[i].id === id) {
return i;
}
}
return null;
}
export default class Map extends Component {
constructor(props) {
super(props);
this.createMapOptions = this.createMapOptions.bind(this);
this.changeMap = this.changeMap.bind(this);
this.toggleMarker = this.toggleMarker.bind(this);
this.state = {
markers: []
};
}
changeMap(props) {
console.log(props);
console.log(this.map);
}
toggleMarker(id) {
const index = findMarkerIndex(id, this.state.markers);
if (index !== null) {
const markers = this.state.markers;
markers[index].show = !markers[index].show;
this.setState({ markers });
}
}
closeMarker(id) {
const index = findMarkerIndex(id, this.state.markers);
if (index !== null) {
const markers = this.state.markers;
markers[index].show = false;
this.setState({ markers });
}
}
createMapOptions(maps) {
return {
styles: this.props.styles
};
}
componentDidMount() {
this.setState({ markers: this.props.markers });
}
render() {
const Marker = this.props.markerComponent;
const markers = (this.state.markers || []).map(marker => (
<Marker
key={marker.id}
handleMarkerClick={this.toggleMarker}
handleMarkerClose={this.closeMarker}
{...marker}
/>
));
return (
<div
style={{
height: this.props.height || '800px',
width: this.props.width || '100%'
}}
>
<GoogleMap
ref={ref => {
this.map = ref;
}}
center={this.props.center || { lat: 50, lng: 25 }}
zoom={this.props.zoom || 8}
options={this.createMapOptions || {}}
onChange={this.changeMap}
>
{markers}
</GoogleMap>
</div>
);
}
}
由于你控制的标记,正在把地图(this.state.markers
),您可以简单地运行 .filter()
上使用你所拥有的边界。
const { markers } = this.state;
if (markers) {
const foundMarkers = markers.filter(marker => {
if (
marker.lat > se.lat &&
sw.lat &&
(marker.lat < ne.lat && nw.lat) &&
(marker.lng > nw.lng && sw.lng) &&
(marker.lng < ne.lng && se.lng)
) {
return marker;
}
});
console.log(foundMarkers);
}
不确定这是否是 "最好的 "方法,但我通过使用来自于 onChange
法。
我抓住每一个界限,并将它们与我的标记进行比较。我把我做的事情发上来,似乎效果还不错。如果它有缺陷,请告诉我!
changeMap(props) {
const {
bounds: { ne, nw, se, sw }
} = props;
// east for lng will be greater
// north for lat will be greater
const { markers } = this.state;
if (markers) {
markers.map(marker => {
if (
marker.lat > se.lat &&
sw.lat &&
(marker.lat < ne.lat && nw.lat) &&
(marker.lng > nw.lng && sw.lng) &&
(marker.lng < ne.lng && se.lng)
) {
console.log(marker);
}
});
}
}
使用Es6,你可以通过向changeMap函数传递变量来获得边界和其他地图选项。
changeMap = ({ center, zoom, bounds }) => {
console.log(bounds );
};