如何在@angular/google-maps组件中使用AdvancedMarkerElement？

由于@angular/google-maps暂未封装AdvancedMarkerElement，可以通过直接调用Google Maps原生API的方式在组件中使用，步骤如下：

1. 确保加载带Advanced Markers库的Google Maps脚本 #

在项目根目录的index.html中引入Maps JS API时，添加libraries=advanced_markers参数，示例：

<script async src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=advanced_markers"></script>

2. 组件模板配置 #

使用@angular/google-maps提供的<google-map>组件，绑定mapReady事件以获取原生地图实例：

<google-map 
  [center]="mapCenter" 
  [zoom]="mapZoom" 
  (mapReady)="handleMapReady($event)"
></google-map>

3. 组件类逻辑实现 #

• 声明全局google变量避免TypeScript报错，或安装类型包获得类型提示
• 在mapReady回调中创建AdvancedMarkerElement实例
• 组件销毁时移除标记，防止内存泄漏

代码示例：

import { Component, OnDestroy } from '@angular/core';
import { Map } from '@angular/google-maps';

// 用于TypeScript类型识别，若安装了@types/google.maps可省略此声明
declare var google: any;

@Component({
  selector: 'app-custom-map',
  templateUrl: './custom-map.component.html',
  styleUrls: ['./custom-map.component.css']
})
export class CustomMapComponent implements OnDestroy {
  mapCenter: google.maps.LatLngLiteral = { lat: 39.9042, lng: 116.4074 };
  mapZoom = 14;
  private advancedMarker?: google.maps.marker.AdvancedMarkerElement;

  handleMapReady(map: google.maps.Map) {
    // 创建基础AdvancedMarker
    this.advancedMarker = new google.maps.marker.AdvancedMarkerElement({
      map: map,
      position: this.mapCenter,
      title: '自定义高级标记'
    });

    // 可选：自定义标记外观（用DOM元素替换默认样式）
    const customContent = document.createElement('div');
    customContent.style.width = '32px';
    customContent.style.height = '32px';
    customContent.style.backgroundColor = '#ff5722';
    customContent.style.borderRadius = '50%';
    customContent.style.border = '2px solid #fff';
    this.advancedMarker.content = customContent;
  }

  ngOnDestroy() {
    // 组件销毁时移除标记
    if (this.advancedMarker) {
      this.advancedMarker.map = null;
    }
  }
}

4. （可选）添加TypeScript类型支持 #

执行以下命令安装Google Maps类型定义包，获得完整的代码提示：

npm install @types/google.maps --save-dev

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