@react-google-maps/api中google.maps.Marker弃用问题求助

一、修复当前库的适配问题 #

1. 先升级依赖到最新版 #

旧版本的@react-google-maps/api没有集成AdvancedMarker的支持，先执行更新：

npm update @react-google-maps/api

2. 加载Maps API时必须引入marker库 #

AdvancedMarkerElement属于Google Maps的附加marker库，加载时必须声明引入。如果用组件库自带的LoadScript，要加上libraries参数：

import { LoadScript } from '@react-google-maps/api';

<LoadScript
  googleMapsApiKey="你的API密钥"
  libraries={["marker"]} // 这行必须加，否则找不到AdvancedMarkerElement
>
  {/* 你的地图组件 */}
</LoadScript>

3. 替换Marker组件并重构图标逻辑 #

@react-google-maps/api提供了AdvancedMarker组件对应原生的AdvancedMarkerElement，同时旧的MarkerImage不再适用，要改用PinElement或自定义DOM元素实现图标：

重构后的代码示例：

import { AdvancedMarker } from '@react-google-maps/api';

drawMarker = () => {
  // 方案1：用官方PinElement创建带样式的标记
  const customPin = new window.google.maps.marker.PinElement({
    scale: 1.5,
    background: "#ff4444",
    borderColor: "#ffffff",
    glyph: "📍" // 可以替换成自定义文字或符号
  });

  // 方案2：用自定义图片当图标（如果需要和原MarkerImage效果一致）
  // const customIcon = document.createElement('img');
  // customIcon.src = markerPosition;
  // customIcon.style.width = '48px';
  // customIcon.style.height = '48px';

  return <AdvancedMarker
    position={{
      lat: this.state.lat,
      lng: this.state.lng
    }}
    content={customPin.element} // 传入PinElement的element，或上面的customIcon
  />
}

4. 排查要点 #

如果还是提示AdvancedMarkerElement未定义：

• 打开浏览器控制台，检查Maps API的加载请求是否包含libraries=marker参数
• 确认@react-google-maps/api版本不低于2.19.0（这个版本开始支持AdvancedMarker）

二、替代库推荐 #

如果@react-google-maps/api长期维护滞后，可换这些功能匹配的库：

• @vis.gl/react-google-maps：Google Maps官方参与维护的React绑定，完全跟进最新API特性，文档齐全
• google-map-react：轻量无依赖的组件，支持自定义标记，可直接集成原生AdvancedMarkerElement
• react-google-maps：老牌库，虽官方停止更新，但社区维护分支支持新API

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