Google Maps Marker类弃用警告：AdvancedMarkerElement属性缺失及解决问询

1. 警告来自API运行时而非TypeScript类型定义：你遇到的弃用警告是Google Maps JavaScript API在运行时触发的，和@types/google.maps类型定义无关。哪怕把类型定义更新到最新，只要代码里还在使用旧的google.maps.Marker，运行时就会抛出这个警告。
2. 新老标记组件的设计差异：AdvancedMarkerElement是Google推出的新一代标记组件，为了优化性能、支持更灵活的自定义，它没有完全照搬旧Marker类的所有属性和API。部分旧属性要么被替换成了新的实现方式，要么因为设计理念变化被移除了，这是官方的刻意取舍。

方案一：逐步迁移到AdvancedMarkerElement #

针对旧Marker的核心功能，用新API的替代方案适配：

• 拖拽功能：通过google.maps.marker.AdvancedMarkerElement搭配google.maps.Draggable控制器实现，示例代码：

  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: { lat: 40.7128, lng: -74.0060 },
    map: map,
  });
  new google.maps.Draggable({ element: marker });
  

• 自定义图标/样式：通过content属性传入自定义DOM元素，或者用PinElement创建样式化标记：

  const pinElement = new google.maps.marker.PinElement({
    background: "#FBBC05",
    borderColor: "#EB9E34",
    glyphColor: "#FFFFFF",
  });
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: { lat: 40.7128, lng: -74.0060 },
    map: map,
    content: pinElement.element,
  });
  

• 事件监听：替换旧事件名，比如用gmp-click替代原click事件，用gmp-dragend替代dragend等。

方案二：临时抑制弃用警告（仅过渡用） #

如果暂时无法全量迁移，可以临时屏蔽警告：

• 运行时过滤：监听Google Maps的警告事件，忽略特定的弃用提示：

  google.maps.event.addListener(window, 'gmaps_warning', (e) => {
    if (e.message.includes('google.maps.Marker')) {
      e.preventDefault();
    }
  });
  

• 构建工具配置：在Webpack、Vite等构建工具中添加警告过滤规则，比如Vite可以在vite.config.ts中配置：

  export default defineConfig({
    build: {
      rollupOptions: {
        onwarn(warning, warn) {
          if (warning.message.includes('google.maps.Marker')) return;
          warn(warning);
        },
      },
    },
  });
  

方案三：核对类型定义兼容性 #

确认@types/google.maps版本确实适配最新API：

• 运行npm list @types/google.maps检查当前版本，确保是最新稳定版；
• 如果类型定义存在缺失或错误，可以去DefinitelyTyped仓库提交issue反馈，或者手动修改本地类型定义（临时方案）。

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