无法在谷歌地图markerclusterer中应用自定义图标进行聚类，因为无法提供位置数据

Posted 2023-03-28

【中文标题】无法在谷歌地图markerclusterer中应用自定义图标进行聚类，因为无法提供位置数据

【英文标题】：Unable to apply custom icons for clustering in google maps markerclusterer because unable to provide position data

【发布时间】：2021-12-29 08:31:23

【问题描述】：

此实用程序的文档对我来说毫无意义。根据this 和this，您可以自定义集群图标，首先通过MarkerClusterer 的renderer 属性将集群图标转换为标记，然后像使用普通标记一样应用图标样式。但是，new google.maps.Marker 需要 position 属性才能工作 - 一个“我无权访问的属性”。我可以访问各个标记位置的各个位置，但使用标记聚类功能的全部意义在于为您计算一个中点。

如果我不知道位置，如何将集群渲染到正确的位置？我可以访问stats 属性上的_position 属性，但这会引发错误：

Cannot read properties of undefined (reading 'addListener')

我真的不知道该怎么做，因为那里似乎没有很多可靠的例子。据我所知，我正在遵循their github 中列出的示例。

private createClusteredMarkerMap() 
  new this._GoogleMaps.load((google) => 
    let map = new google.maps.Map(this._map, mapOptions);
    const markers = this._locations.map(( lat, long ) => 
      // loop and extract lat/lng
    );

    new markerClusterer.MarkerClusterer(
      map,
      markers,
      renderer: 
        render: (clusters, stats) => this.testRenderer(clusters, stats) // trying to edit the icons here
      
    );
  );


private testRenderer(clusters, stats) 
  const svg = // create svg here
  return new google.maps.Marker(
// position is required here but I don't have that value
    icon: 
      url: `data:image/svg+xml;base64,$svg`,
      scaledSize: new google.maps.Size(45, 45),
    ,
    label: 
      text: String(stats.count),
      color: "rgba(255,255,255,0.9)",
      fontSize: "12px",
    ,
  );

【参考方案1】：

在render 方法中缺少return 语句。全场击掌。