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

【问题标题】：How to get Marker's custom properties with getMarkers() method?如何使用 getMarkers() 方法获取 Marker 的自定义属性？
【发布时间】：2019-06-05 13:58:41
【问题描述】：

我正在构建一个使用 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>
))}

还有其他方法可以访问标记的自定义属性吗？

【问题讨论】：

标签： markerclusterer react-google-maps

【解决方案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

【讨论】：