Google地图迁移至AdvancedMarkerElement：如何设置标记锚点？

由于google.maps.Marker将于2024年2月21日终止支持，迁移到google.maps.marker.AdvancedMarkerElement时，锚点的设置逻辑和旧版有所不同，以下是实现与旧代码相同左下角锚点的具体方法：

核心差异说明 #

旧版Marker的anchor是相对于图标左上角的像素偏移，而AdvancedMarkerElement通过anchor属性（支持像素坐标或百分比）定义标记内容与地图坐标绑定的锚点位置，默认锚点为底部中心（{x: 0.5, y: 1}）。

实现代码 #

方法1：使用像素锚点（完全匹配旧版(0,32)的偏移） #

直接指定锚点相对于内容左上角的像素偏移，对应图标的左下角：

// 创建自定义图标元素
const iconImg = document.createElement('img');
iconImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
iconImg.style.width = "20px";
iconImg.style.height = "32px";

// 创建AdvancedMarkerElement并设置锚点
const marker = new google.maps.marker.AdvancedMarkerElement({
  position: position,
  map: map,
  content: iconImg,
  anchor: new google.maps.Point(0, 32) // 偏移量：x=0（左边缘），y=32（底部边缘）
});

方法2：使用百分比锚点（适配不同尺寸图标） #

如果需要图标尺寸变化时锚点自动对齐左下角，可使用百分比值：

const iconImg = document.createElement('img');
iconImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
iconImg.style.width = "20px";
iconImg.style.height = "32px";

const marker = new google.maps.marker.AdvancedMarkerElement({
  position: position,
  map: map,
  content: iconImg,
  anchor: { x: 0, y: 1 } // x=0%（左边缘），y=100%（底部边缘）
});

补充：匹配旧版点击区域 #

如果需要和旧Marker的点击区域一致，可添加hitbox属性指定点击范围：

const marker = new google.maps.marker.AdvancedMarkerElement({
  // 其他参数...
  hitbox: { width: 20, height: 32 } // 对应旧图标的尺寸
});

内容的提问来源于stack exchange，提问作者函館太郎