Google Maps自定义图标定位偏移及缩放移位问题求助

我知道这看起来像是重复提问，但翻遍Stack Overflow都没找到能解决我问题的方案😅 我的情况是这样的：

• 用了256×256尺寸的自定义图标，设置scaledSize为50之后，图标没办法精准对应指定的经纬度位置
• 而且地图缩放的时候，标记还会偏离原来的位置
• 但Google官方的复杂图标示例却能正常工作，这就让我很困惑了

我的代码大概是这样的：

var image = {
  url: 'my-custom-icon.png',
  scaledSize: new google.maps.Size(50, 50)
};

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});

问题出在哪？ #

默认情况下，Google地图标记的锚点是图标的左下角，但当你缩放自定义图标时，如果没手动设置anchor属性，图标实际的定位点就会和你预期的不符——尤其是缩放地图时，因为缩放比例和锚点不匹配，偏移会更明显。官方示例里其实悄悄处理了锚点的配置，所以看起来一切正常。

怎么解决？ #

核心就是手动设置anchor属性，指定图标应该对准经纬度的位置，分享两个常用的配置方式：

方式1：让图标中心对准经纬度

如果希望图标中心精准落在指定坐标上，直接用缩放后尺寸的一半作为锚点坐标就行：

var image = {
  url: 'my-custom-icon.png',
  scaledSize: new google.maps.Size(50, 50),
  // 锚点设为缩放后图标的中心（50/2=25）
  anchor: new google.maps.Point(25, 25)
};

方式2：基于原始图标定位点配置

如果你的原始图标有固定的定位逻辑（比如图标底部中间是本该对准坐标的点），可以结合原始尺寸和缩放比例来计算：

var image = {
  url: 'my-custom-icon.png',
  size: new google.maps.Size(256, 256), // 原始图标尺寸
  scaledSize: new google.maps.Size(50, 50), // 缩放后尺寸
  // 假设原始图标底部中间是定位点，对应缩放后的位置就是(25,50)
  anchor: new google.maps.Point(25, 50)
};

小技巧：快速验证

要是拿不准锚点数值，可以先把anchor设为new google.maps.Point(0,0)（也就是默认的左下角），观察偏移方向和幅度，再逐步调整数值，直到定位完全准确。地图缩放时的偏移问题，本质也是锚点和缩放比例不匹配导致的，设置正确锚点后就能彻底解决。

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