如何使用 getMarkers() 方法获取 Marker 的自定义属性？

Question

我正在构建一个使用 react-google-maps 集成组件的应用程序，并且我创建了一个标记的自定义属性 'id'。我必须通过单击标记聚类器来访问聚类标记，但我似乎无法访问我通过 getMarkers() 方法创建的自定义属性。

{props.clusters.map(cluster => (
  <MarkerClusterer
    averageCenter
    enableRetinaIcons
    gridSize={60}
    onClick={(markerClusterer) => {
                const clickedMarkers = markerClusterer.getMarkers()
              }}
  >
    {cluster.markers.map(marker => (
      <Marker
        id={ marker.id}
        position={{ lat: marker.lat, lng: marker.lng }}
      />
    ))}
  </MarkerClusterer>
))}

是否有任何其他方法可以访问标记的自定义属性？

Answer 1

您可以通过 MarkerProps.options prop 分配自定义属性，例如 id，如下所示：

<MarkerClusterer onClick={this.handleMarkerClustererClick}>
   {this.props.markers.map(marker => (
      <Marker
         options = {{marker.id}} 
         key={index}
         position={marker.ppos}
      />
    ))}
</MarkerClusterer>

使用 MarkerClusterer.getMarkers 方法时，这些属性将通过标记实例可用：

handleMarkerClustererClick(markerClusterer, pos) {
  const clickedMarkers = markerClusterer.getMarkers();
  for( let m of clickedMarkers){
    console.log(m.id); 
  }
}

这里是a demo

如何使用 getMarkers() 方法获取 Marker 的自定义属性？

How to get Marker's custom properties with getMarkers() method?

markerclusterer

react-google-maps