Google-Map-React 如何获取边界内的标记？

Question

当我移动地图时，我有边界，但我不知道如何获取这些边界内包含的标记。我不想非得用new google.map...。我想继续只使用React-Google-Map. 如果这是不可能的，那么我将使用谷歌实例。

\n\n

我将在下面发布我的代码。我正在控制台注销对谷歌地图的引用以及其中的道具onChange。

\n\n

Props => \n\nbounds:{nw: {\xe2\x80\xa6}, se: {\xe2\x80\xa6}, sw: {\xe2\x80\xa6}, ne: {\xe2\x80\xa6}}\ncenter:{lat: 53, lng: -7.77000000000001}\nmarginBounds:{nw: {\xe2\x80\xa6}, se: {\xe2\x80\xa6}, sw: {\xe2\x80\xa6}, ne: {\xe2\x80\xa6}}\nsize:{width: 1818, height: 455}\nzoom:10\n__proto__:Object\n\nMap Ref => GoogleMap\xc2\xa0{props: {\xe2\x80\xa6}, context: {\xe2\x80\xa6}, refs: {\xe2\x80\xa6}, updater: {\xe2\x80\xa6}, _getMinZoom: \xc6\x92,\xc2\xa0\xe2\x80\xa6}\n

\n\n

---

\n\n

import React, { Component } from 'react';\nimport GoogleMap from 'google-map-react';\n\nfunction findMarkerIndex(id, markers) {\n  for (let i = markers.length; i--; ) {\n    if (markers[i].id === id) {\n      return i;\n    }\n  }\n  return null;\n}\n\nexport default class Map extends Component {\n  constructor(props) {\n    super(props);\n    this.createMapOptions = this.createMapOptions.bind(this);\n    this.changeMap = this.changeMap.bind(this);\n    this.toggleMarker = this.toggleMarker.bind(this);\n\n    this.state = {\n      markers: []\n    };\n  }\n\n  changeMap(props) {\n    console.log(props);\n    console.log(this.map);\n  }\n\n  toggleMarker(id) {\n    const index = findMarkerIndex(id, this.state.markers);\n    if (index !== null) {\n      const markers = this.state.markers;\n      markers[index].show = !markers[index].show;\n      this.setState({ markers });\n    }\n  }\n\n  closeMarker(id) {\n    const index = findMarkerIndex(id, this.state.markers);\n    if (index !== null) {\n      const markers = this.state.markers;\n      markers[index].show = false;\n      this.setState({ markers });\n    }\n  }\n\n  createMapOptions(maps) {\n    return {\n      styles: this.props.styles\n    };\n  }\n\n  componentDidMount() {\n    this.setState({ markers: this.props.markers });\n  }\n\n  render() {\n    const Marker = this.props.markerComponent;\n    const markers = (this.state.markers || []).map(marker => (\n      <Marker\n        key={marker.id}\n        handleMarkerClick={this.toggleMarker}\n        handleMarkerClose={this.closeMarker}\n        {...marker}\n      />\n    ));\n    return (\n      <div\n        style={{\n          height: this.props.height || '800px',\n          width: this.props.width || '100%'\n        }}\n      >\n        <GoogleMap\n          ref={ref => {\n            this.map = ref;\n          }}\n          center={this.props.center || { lat: 50, lng: 25 }}\n          zoom={this.props.zoom || 8}\n          options={this.createMapOptions || {}}\n          onChange={this.changeMap}\n        >\n          {markers}\n        </GoogleMap>\n      </div>\n    );\n  }\n}\n

\n

Answer 1

当您控制放入地图 ( 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);

}