缩放时SVG图标无法固定在折线（Polyline）上的问题求助

嘿，我明白你现在遇到的麻烦——自定义的SVG标记不管是放大还是缩小地图，都没法稳稳贴在折线上，调了origin和anchor也没搞定。咱们来一步步拆解问题，找到解决方案：

核心问题：锚点与路径原点不匹配 #

你自定义的标记路径是一个水滴形状，咱们先捋清楚它的坐标逻辑：

路径从M 0,0开始，向下绘制到y=-30的位置（也就是水滴的底部），然后再回到起点。

但你设置的锚点是new google.maps.Point(0,-5)，这意味着你把标记的(0,-5)这个点绑定到地图上的目标坐标，而不是水滴真正应该贴在折线上的底部（y=-30）。这就导致缩放时，标记的"绑定点"和视觉上的"贴合点"不一致，自然会偏移。

解决方案1：修正锚点到路径的贴合位置 #

把锚点改成路径的最低点，也就是水滴底部的坐标(0,-30)，这样标记的底部就会精准绑定到你设置的地图坐标上，缩放时就不会乱跑了。修改后的代码如下：

pinMarker: function(color) { 
  return { 
    path: "M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z", 
    fillColor: color, 
    fillOpacity: 1, 
    strokeColor: '#000', 
    strokeWeight: 2, 
    scale: 1, 
    anchor: new google.maps.Point(0, -30), // 改为路径的最低点，确保贴合折线
    rotation: 0 
  }; 
}

解决方案2：确保标记位置基于经纬度而非像素 #

如果你是通过计算像素位置来放置标记（比如根据distanceKm手动偏移），那缩放时像素坐标会随地图级别变化，必然导致偏移。必须把标记的position设置为折线的经纬度点：

• 如果是折线的顶点，直接取折线的getPath()里的对应坐标；
• 如果是折线的中间点，用Google Maps Geometry库的google.maps.geometry.spherical.interpolate()方法计算出中间点的经纬度，再赋值给标记的position。

额外提醒 #

如果需要计算折线中间点，记得在加载Google Maps API时引入geometry库：

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

这样调整后，不管怎么缩放地图，标记都会牢牢贴在折线上啦！

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