如何更改 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 位置

如何知道用户是不是更改缩放(Google Maps V3)

RangeError,谷歌地图方向服务。 angular2, SebastianM/angular2-google-maps