如何设置新版Angular Google Maps聚合标记z-index使其位于非聚合标记下层

实现方案 #

第一步：修改模板代码 #

给map-marker-clusterer添加模板引用变量，同时给非聚合标记的配置项增加高优先级zIndex：

<google-map
      #map
      height="100%"
      width="100%"
      [zoom]="zoom"
      [center]="center"
      [options]="mapOptions">
        <!-- clustered markers -->
        <!-- 新增#clusterer模板引用 -->
        <map-marker-clusterer #clusterer imagePath="assets/img/clusters/cluster_green">
          <map-marker
            #marker="mapMarker"
            *ngFor="let site of okSitesBound"
            [position]="site.position"
            [title]="site.displayName"
            [icon]="site.pinIcon"
            fit="true"
            [options]="okPinOptions"
            (mapClick)="markerClicked(marker, site)"
            (mapMouseover)="enableMouseover ? markerClicked(marker, site) : null">
          </map-marker>
        </map-marker-clusterer>
        <!-- unclustered markers -->
        <map-marker
          #marker="mapMarker"
          *ngFor="let site of notOkSitesBound"
          [position]="site.position"
          [title]="site.displayName"
          [icon]="site.pinIcon"
          fit="true"
          <!-- 需在notOkPinOptions中配置zIndex为较高值，示例：zIndex: 999 -->
          [options]="notOkPinOptions"
          (mapClick)="markerClicked(marker, site)"
          (mapMouseover)="enableMouseover ? markerClicked(marker, site) : null">
        </map-marker>
</google-map>

第二步：修改组件类代码 #

获取聚合器原生实例，统一设置聚合标记的全局层级：

import { ViewChild, AfterViewInit } from '@angular/core';
import { MapMarkerClusterer } from '@angular/google-maps';

export class YourMapComponent implements AfterViewInit {
  // 获取模板中的聚合器实例
  @ViewChild('clusterer') clusterer: MapMarkerClusterer;

  // 原有业务代码保持不变
  // ...

  ngAfterViewInit(): void {
    // 等待聚合器初始化完成后设置低层级
    setTimeout(() => {
      this.clusterer.markerClustererInstance.setZIndex(100);
    }, 0);

    // 若以上方法不生效可开启以下DOM操作兜底：
    // setTimeout(() => {
    //   document.querySelectorAll('.marker-cluster').forEach(el => {
    //     (el as HTMLElement).style.zIndex = '100';
    //   });
    // }, 0);
  }
}

可选：全局CSS兜底方案 #

如果动态设置偶现失效，可直接在全局样式文件中添加样式固定层级：

/* 聚合标记层级设低 */
.marker-cluster {
  z-index: 100 !important;
}
/* 普通标记层级设高 */
.gm-style .gm-marker {
  z-index: 999 !important;
}

注意事项 #

• 如果缩放地图后层级出现异常，可监听地图的zoom_changed事件，触发后重新执行一次层级设置逻辑即可
• 不同版本的MarkerClusterer生成的聚合标记类名可能存在差异，可通过浏览器调试工具找到对应类名替换上面的.marker-cluster即可

内容的提问来源于stack exchange，提问作者gib65