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

Question

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

设置z索引无效。使用经典的谷歌地图，他们说要抓住地图中包含聚类的图层，并将其移动到包含未聚类标记的图层下方。谷歌地图的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