如何在谷歌地图上为角度设置聚集标记的 z 索引？

Question

我们在我们的应用程序中使用 Google Maps for Angular。我们正在实施集群。默认情况下，似乎将集群置于非集群标记之上。我们想把它们放在标记后面。我已经用谷歌搜索了这个问题的解决方案，经典的谷歌地图有很多点击，甚至还有一些用于 Angular 的旧版谷歌地图（其中标签是 agm-map），但当前版本没有Google Maps for Angular（标签为 google-map）：https://timdeschryver.dev/blog/google-maps-as-an-angular-component。

设置 z-index 不起作用。使用经典的谷歌地图，他们说要抓住地图中包含聚类的图层，并将其移动到包含非聚类标记的图层下方。 Google Maps for Angular 是否有与此等价的功能？

这是我们的代码：

<google-map
      #map
      height="100%"
      width="100%"
      [zoom]="zoom"
      [center]="center"
      [options]="mapOptions">
        <!-- clustered markers -->
        <map-marker-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"
          [options]="notOkPinOptions"
          (mapClick)="markerClicked(marker, site)"
          (mapMouseover)="enableMouseover ? markerClicked(marker, site) : null">
        </map-marker>

^ 是否有什么我需要在这里更改以将集群放在其他标记后面？我可以用 Javascript 做些什么吗？

谢谢！

Answer 1

你可以这样写：

        <map-marker
            #marker="mapMarker"
            *ngFor="let site of okSitesBound"
            [position]="site.position"
            [title]="site.displayName"
            [icon]="site.pinIcon"
            [zIndex] = 99
            
          </map-marker>

这是工作示例： https://jsfiddle.net/pthqnxdo/7/

或者你可以使用setZIndex：https://developers.google.com/maps/documentation/javascript/reference/marker#Marker.setZIndex

您可以尝试更多示例代码：

https://developers.google.com/maps/documentation/javascript/examples/marker-simple#maps_marker_simple-javascript