Google Maps通用JavaScript代码中Marker升级为AdvancedMarkerElement的实现咨询

嘿，我来帮你一步步搞定把Marker升级成AdvancedMarkerElement的事儿，咱们先从最基础的地方改起：

1. 先确认API加载依赖 #

AdvancedMarkerElement属于Google Maps的Marker库，所以你需要确保加载Google Maps API时，URL里包含libraries=marker参数，比如：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker"></script>

如果之前已经加载了其他库（比如places），可以合并成libraries=marker,places。

2. 调整类的依赖注入 #

你的GoogleMap类构造函数和init方法里，原来依赖Libraries.Marker，现在要替换成Libraries.AdvancedMarkerElement：

• 修改构造函数里的init调用：

  // 原来的：
  // this.init(Libraries.Map, Libraries.Marker, Libraries.LatLngBounds);
  // 改成：
  this.init(Libraries.Map, Libraries.AdvancedMarkerElement, Libraries.LatLngBounds);
  

• 同时调整init方法的参数定义（如果有明确声明的话），把Marker换成AdvancedMarkerElement。

3. 替换标记创建逻辑 #

原来创建Marker的地方，全部改成AdvancedMarkerElement，同时调整选项格式：

核心选项差异：

• 原来的label选项 → 现在用text属性（标记上显示的文本）
• 移除labelOrigin属性，AdvancedMarkerElement会自动处理文本位置，也可以用CSS自定义
• icon属性支持直接传图片URL，或者自定义DOM元素（更灵活的样式控制）

比如你代码里setDirection方法中创建标记的部分，要改成这样：

flags.forEach((flagDetails, index) => {
    const advancedMarkerOptions = {
        map: GM.map.instance,
        position: flagDetails.position,
        text: flagDetails.label, // 原来的label换成text
        icon: flagDetails.icon // 保留原来的icon配置，AdvancedMarkerElement兼容URL格式
    };
    // 创建AdvancedMarkerElement实例
    let flag = new GM.g.AdvancedMarkerElement(advancedMarkerOptions);
    GM.flags.push(flag);
    // 原来的事件绑定逻辑不变，比如绑定点击显示infowindow：
    google.maps.event.addListener(flag, 'click', () => {
        // 你的infowindow显示逻辑
    });
});

4. 修改标记的显示/隐藏控制逻辑 #

AdvancedMarkerElement不支持setMap()、setOpacity()、setVisible()这些方法，要改成直接设置属性：

比如showMarkers方法：

// 原来的：
// mm[i].setMap(map);
// mm[i].setOpacity(1);
// mm[i].setVisible(true);
// 改成：
mm[i].map = map;
mm[i].opacity = 1;
mm[i].visible = true;

hideMarkers方法：

// 原来的：
// markers[i].setMap(null);
// markers[i].setOpacity(0);
// markers[i].setVisible(false);
// 改成：
markers[i].map = null;
markers[i].opacity = 0;
markers[i].visible = false;

5. 其他无需修改的部分 #

你的代码里getAddressInfos、changeDirection、centerMap这些和标记类型无关的逻辑，完全不需要改动，直接保留就行。

最后测试一下升级后的代码，重点检查标记是否正常显示、点击交互、方向规划里的标记是否正常工作，如果遇到样式问题，AdvancedMarkerElement支持用CSS自定义标记样式（比如通过content属性传入自定义DOM元素），可以灵活调整。

备注：内容来源于stack exchange，提问作者Gerits Aurelien