时间戳

首页 > 解决方案 > 如何更改 Angular Google Maps 组件中的 MapMarker z-index？

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

问题描述

使用包含 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标记，但它们不起作用。

标签： angulargoogle-mapsgoogle-maps-markers

解决方案

经过几个小时的尝试，我终于弄明白了。

而不是设置zIndex为 Marker 的属性或使用marker.setZIndex()，我不得不将 放入zIndexMarker 的 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 
      });

请注意，我将它从labelMarker 的属性下移到了iconinside marker.options。

如果有人可以找到并确认这已记录在 Angular Google Maps 组件文档中的某处，我将不胜感激。我找不到它。

推荐阅读