Angular Google Maps加载400个Advanced Marker时性能卡顿求助

针对你遇到的400个map-advanced-marker渲染卡顿问题，结合Angular和Google Maps的特性，从以下几个方向优化：

1. 修复@for跟踪策略的性能问题 #

你当前使用track marker是基于对象引用跟踪，当标记数组有更新时，Angular可能会频繁销毁重建组件。改成基于标记的唯一标识跟踪，让Angular精准复用组件：

@for (marker of markers; track marker.id) {
  <map-advanced-marker #markerElem="mapAdvancedMarker" [position]="marker ?? {lat: 0, lng: 0}"  [title]="marker.title"
  (mapClick)="onMarkerClick(markerElem)"></map-advanced-marker>
}

注：确保你的marker对象有id或其他唯一字段，没有的话可以手动生成（比如利用经纬度组合）。

2. 启用OnPush变更检测 #

将包含地图的组件设置为OnPush变更检测策略，减少Angular不必要的变更检测开销：

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-your-map-component',
  templateUrl: './your-map-component.html',
  styleUrls: ['./your-map-component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourMapComponent {
  // ... 组件逻辑
}

更新标记数组时，要使用不可变方式（比如扩展运算符），确保Angular能检测到数组变化：

this.markers = [...this.markers, newMarker];

3. 绕过Angular组件封装，直接用原生API创建标记 #

每个map-advanced-marker都是Angular组件，400个组件的实例化会带来额外性能损耗。直接用Google Maps原生API批量创建标记，绕过Angular组件层：

import { AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
import { GoogleMap, MapInfoWindow } from '@angular/google-maps';

export class YourMapComponent implements AfterViewInit, OnDestroy {
  @ViewChild(GoogleMap) map!: GoogleMap;
  @ViewChild(MapInfoWindow) infoWindow!: MapInfoWindow;
  private nativeMarkers: google.maps.marker.AdvancedMarkerElement[] = [];

  ngAfterViewInit() {
    // 假设this.rawMarkers是你的原始标记数据
    this.rawMarkers.forEach(markerData => {
      const nativeMarker = new google.maps.marker.AdvancedMarkerElement({
        map: this.map.googleMap,
        position: { lat: markerData.lat, lng: markerData.lng },
        title: markerData.title
      });

      // 绑定点击事件
      nativeMarker.addListener('click', () => {
        const contentString = 'some html here';
        this.infoWindow.openAdvancedMarkerElement(nativeMarker, contentString);
      });

      this.nativeMarkers.push(nativeMarker);
    });
  }

  // 组件销毁时清理标记，避免内存泄漏
  ngOnDestroy() {
    this.nativeMarkers.forEach(marker => marker.setMap(null));
  }
}

模板中只需保留基础地图和信息窗口，移除循环的map-advanced-marker：

<div class="map-container" style="height: 100%;">
  <google-map #map height="100%" width="100%" [options]="mapOptions" mapId="myMapID">
    <map-info-window #infoWindow>info window</map-info-window>
  </google-map>
</div>

4. 优化信息窗口渲染 #

避免每次点击都创建字符串内容，改用ng-template预渲染动态内容：

<map-info-window #infoWindow>
  <ng-template>
    <div>{{ activeMarker?.title }}</div>
    <!-- 其他动态内容 -->
  </ng-template>
</map-info-window>

点击时更新绑定的activeMarker再打开窗口：

activeMarker: any;

// 对应原生标记的点击事件
nativeMarker.addListener('click', () => {
  this.activeMarker = markerData;
  this.infoWindow.openAdvancedMarkerElement(nativeMarker);
});

5. 调整地图配置减少性能消耗 #

检查地图选项，禁用不必要的特性：

mapOptions: google.maps.MapOptions = {
  disableDefaultUI: true, // 禁用默认UI控件减少渲染压力
  clickableIcons: false, // 不需要图标点击时禁用
  gestureHandling: 'cooperative', // 优化手势交互性能
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

内容的提问来源于stack exchange，提问作者Alex