咨询@angular/google-maps适配google.maps.marker.AdvancedMarkerElement的更新及组件问题

一、@angular/google-maps对AdvancedMarkerElement的支持情况 #

目前@angular/google-maps的16.x及以上版本已原生适配google.maps.marker.AdvancedMarkerElement，替代了旧的传统Marker组件。使用<map-marker>组件时，默认会渲染AdvancedMarkerElement，无需额外配置，只需确保@angular/google-maps版本与你的Angular框架版本匹配（比如Angular 16对应@angular/google-maps 16.x）。

二、解决<map-marker>不是Angular已知元素的问题 #

该错误的核心原因是未在对应模块/组件中正确导入GoogleMapsModule，按以下步骤修复：

1. 安装/升级适配版本的依赖
   确保安装与你的Angular版本匹配的@angular/google-maps：

npm install @angular/google-maps@latest

注：若你的Angular版本低于16，需安装对应大版本的依赖包，比如Angular 15对应@angular/google-maps 15.x。

2. NgModule场景下的导入
   如果你的组件属于NgModule，在对应模块的imports数组中添加GoogleMapsModule：

import { GoogleMapsModule } from '@angular/google-maps';

@NgModule({
  imports: [
    // 其他已导入模块
    GoogleMapsModule
  ],
  declarations: [YourTargetComponent]
})
export class YourModule { }

3. 独立组件场景下的导入
   若使用Angular 14+的独立组件特性，直接在组件的imports数组中引入GoogleMapsModule：

import { Component } from '@angular/core';
import { GoogleMapsModule } from '@angular/google-maps';

@Component({
  selector: 'app-map-container',
  templateUrl: './map-container.component.html',
  standalone: true,
  imports: [GoogleMapsModule]
})
export class MapContainerComponent {
  // 组件业务逻辑
}

完成上述操作后，<map-marker>组件就能被Angular正确识别，你代码中设置的[position]、[draggable]等属性及shapeChanged事件，也能正常对应AdvancedMarkerElement的特性。

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