如何更改 Angular Google Maps 组件中的 MapMarker z-index？

Posted 2023-03-28

【中文标题】如何更改 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 组件文档中的某处，我将不胜感激。我找不到它。