Google Maps AdvancedMarkerView 无法识别问题求助

针对你遇到的AdvancedMarkerView类型未识别的问题，可尝试以下几个解决方案：

1. 升级Google Maps TypeScript类型定义包 #

旧的@types/googlemaps包已被弃用，且不包含Advanced Marker相关类型。需要替换为官方维护的新类型包：

# 卸载旧类型包
npm uninstall @types/googlemaps

# 安装最新的官方类型包
npm install @types/google.maps --save-dev

安装完成后重启TypeScript服务或IDE，让新类型定义生效。

2. 验证Maps API的加载参数 #

确认你的Google Maps API请求中已正确包含marker库和beta版本参数：

• 打开浏览器开发者工具的Network面板，查找maps.googleapis.com/maps/api/js的请求
• 检查请求URL是否包含libraries=marker和v=beta参数
  如果参数缺失，检查你的<Wrapper>组件配置是否正确，确保version="beta"和libraries={["marker"]}这两个属性没有被覆盖或遗漏。

3. 临时绕过类型检查（应急方案） #

如果上述方法暂时无法生效，可以通过类型断言或补充类型声明来绕过TypeScript的报错：

方法一：类型断言 #

// 替换原实例化代码
const markerView = new (google.maps.marker as any).AdvancedMarkerView({
  position,
  content: container,
});

// 同时修改ref的类型定义
const markerRef = useRef<any | null>(null);

方法二：补充类型声明文件 #

在项目根目录创建google-maps.d.ts文件，添加以下内容：

declare namespace google.maps.marker {
  interface AdvancedMarkerViewOptions {
    position: google.maps.LatLngLiteral;
    content: HTMLElement;
    map?: google.maps.Map;
  }

  class AdvancedMarkerView {
    constructor(options: AdvancedMarkerViewOptions);
    position: google.maps.LatLngLiteral;
    map: google.maps.Map | undefined;
  }
}

然后确保你的tsconfig.json包含这个声明文件的路径。

4. 更新@react-google-maps/api版本 #

如果你使用的是@react-google-maps/api库，确保安装了支持Advanced Marker的最新版本：

npm install @react-google-maps/api@latest

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