将自定义标记放在 markerclusterer答案

【问题标题】：Place custom marker over markerclusterer将自定义标记放在 markerclusterer
【发布时间】：2021-08-10 06:58:54
【问题描述】：

我正在使用 google maps api 3 和 agm（角度谷歌地图）在地图上放置许多自定义标记。其中一些标记的优先级较低，因此我在这些标记上实现了聚类（使用 markerClusterer）以帮助提高性能。

但是，优先级较高的标记需要始终位于集群之上，目前集群似乎位于它们自己的层上，并且该层始终位于标记层之上。

有没有办法强制集群和标记位于同一层，所以我可以实现 zIndex？或者至少，强制制造者层位于集群层之上。

或者，我们是否可以检测集群是否超过标记，并移动集群以使其不碍事。

【问题讨论】：

您使用的是哪个MarkerClusterer？您如何将更高优先级的Markers 添加到地图中？请提供一个 minimal reproducible example 来证明该问题。

标签： javascript google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

经过多年的努力，我发现这样做的唯一方法是创建一个窗格，以便 getPanes 方法可用，从那里将 markerLayer（标记所在的位置）移动到 overlayMouseTarget，这里是半工作示例：

首先，设置一个或多个标记的 zIndex

marker.setZIndex(9999);
marker.setMap(this.map);

我使用了一种非常冗长的方法来检查 json 信息以更改 zIndex 编号，因此对于这个示例，我只会说所有标记都需要位于集群上方，然后是我计划放入的任何标记中群集，我将该标记设置为 10 并推送到一个数组，然后将该数组设置为标记群集。现在进入分层：

const overlay = function() {};

overlay.prototype = new google.maps.OverlayView();
overlay.prototype.onAdd = function() {

  const panes = this.getPanes();

  for(let i = 0; i < panes.markerLayer.childNodes.length; i++) {
    panes.overlayMouseTarget.appendChild(panes.markerLayer.childNodes[i]);
  }

  console.log(panes.overlayMouseTarget);
};

const x = new overlay();
x.setMap(this.map);

这样，这会将所有标记和集群推送到同一个 dom 元素中，因此 zIndex 受到尊重。

【讨论】：