如何更改角度谷歌地图组件中的MapMarker z索引

Question

使用一个包含谷歌地图的简单Angular组件，我无法更改地图标记的zIndex。当它们聚集在一起时，我无法将后面的标记移到前面。

Angular版本约为11.2.14，@Angular/谷歌地图约为11.2.13。

这是Maps实例的标记。

<google-map
[height]="height"
[width]="width"
[center]="center"
[options]="options"
>
<map-marker
class="marker"
*ngFor="let marker of markers"
[position]="marker.position"
[label]="marker.label"
[title]="marker.title"
[options]="marker.options"
>
</map-marker>
</google-map>

在组件本身：

export class MapComponent implements OnChanges {
@Input()
places: Place[];
@Input()
center: google.maps.LatLngLiteral;
@Input()
selectedPlace: Place
height: string = "630px";
width: string = "700px";
options: google.maps.MapOptions = {
mapTypeControl: false,
fullscreenControl: false,
zoom: 13,
zoomControl: true,
scrollwheel: false,
disableDoubleClickZoom: true,
maxZoom: 18,
minZoom: 10,
streetViewControl: false
};
markers: google.maps.Marker[] = [];
constructor(private cd: ChangeDetectorRef) {}
ngOnChanges(changes: SimpleChanges) {
if ('places' in changes) {
if (this.places.length !== 0) {
this.createMarkers();
}
}
if ('selectedPlace' in changes) {
this.highlightPlace(changes['selectedPlace'].previousValue, changes['selectedPlace'].currentValue);
}
}
createMarkers() {
const _newMarkers: google.maps.Marker[] = [];
this.places.forEach((place, index) => {
const marker = new google.maps.Marker({
position: {
lat: place.lat,
lng: place.lng
},
clickable: false,
title: place.name,
label: {
className: 'marker-label',
text: `${place.distance} km away`,
fontSize: '18px',
fontWeight: 'bold'
},
zIndex: index
}
marker.set('options', { icon: "assets/imgs/bubble.svg" });
marker.set('id', place.id);
_newMarkers.push(marker);
}
this.markers = _newMarkers;
this.cd.detectChanges();
}
highlightPlace(prev: Place | null, current: Place | null) {
this.markers = this.markers.map((marker => {
if (prev !== null && prev.id == marker['id']) {
marker.set('options', { icon: "asset/imgs/bubble.svg" });
marker.set('label', { ...marker.getLabel(), color: 'black' });
// marker.setZIndex(1); Doesn't work!
marker.set('zIndex', 1); Also doesn't work!
}
if (current !== null && current.id == marker['id']) {
marker.set('options', { icon: "asset/imgs/bubble_highlighted.svg" });
marker.set('label', { ...marker.getLabel(), color: 'white' });
// marker.setZIndex(1000); Doesn't work!
marker.set('zIndex', 1000); Also doesn't work!
}
return marker;
});
}
}

这些改变标记的zIndex的方法都没有任何效果。在检查Chrome中的元素时，zIndex从未在创建时设置为，也从未在我尝试设置之后的任何时候设置为。它总是一些随机的，大的负数(低于-100(。我有什么不明白的？API说我可以设置Markers的zIndex，但它们不起作用。

Answer 1

经过几个小时的尝试，我终于找到了答案。

我不得不将zIndex放在Marker的options属性中，而不是将zIndex设置为Marker的属性或使用marker.setZIndex()。

const marker = new google.maps.Marker({
position: {
lat: place.lat,
lng: place.lng
},
clickable: false,
title: place.name,
label: {
className: 'marker-label',
text: `${place.distance} km away`,
fontSize: '18px',
fontWeight: 'bold'
},
}
marker.set('options', 
{ 
icon: "assets/imgs/bubble.svg",
zIndex: 1000 
});

请注意，我将它从Marker上的label属性下移动到了marker.options内的icon下。

如果有人能找到并确认这是在Angular Google Maps组件文档中的某个地方记录的，我将不胜感激。我找不到它。