如何更改 Angular Google Maps 组件中的 MapMarker z-index?
Posted
技术标签:
【中文标题】如何更改 Angular Google Maps 组件中的 MapMarker z-index?【英文标题】:How do you change MapMarker z-index in the Angular Google Maps Component? 【发布时间】:2021-09-13 23:36:07 【问题描述】:使用包含 Google 地图的简单 Angular 组件,我无法更改地图标记的 zIndex。当它们聚集在一起时,我无法将标记放在后面。
Angular 版本是 ~11.2.14,@angular/google-maps 是 ~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 说我可以设置标记的zIndex
,但它们不起作用。
【问题讨论】:
你试过setZIndex(100)
吗?
@Z。 Bagley 是的,我试过 100、1000、100000000000。没有什么能改变它。它不动。
【参考方案1】:
尝试了几个小时,我终于弄明白了。
我没有将zIndex
设置为Marker 的属性或使用marker.setZIndex()
,而是将zIndex
放在Marker 的options 属性中。
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 组件文档中的某处,我将不胜感激。我找不到它。
【讨论】:
以上是关于如何更改 Angular Google Maps 组件中的 MapMarker z-index?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular Google Maps 指令中使用相对路径?
如何在 Angular Google Maps 指令中使用相对路径?
如何在 Google Maps Angular JS 中打开地理位置?
angular-google-maps 通过鼠标点击获取 GEO 位置
RangeError,谷歌地图方向服务。 angular2, SebastianM/angular2-google-maps