如何在不改变位置的情况下旋转Google Maps标记

旋转标记时位置偏移的核心原因是：自定义路径的标记默认锚点为路径的左上角（坐标(0,0)），旋转时会绕这个点转动，导致标记偏离目标位置。解决方法是将锚点设置为标记的几何中心，让旋转围绕中心进行。

修改后的代码 #

const image = {
    path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
    fillColor: "#ffd400",
    fillOpacity: 1,
    strokeColor: "#000", // 补全#号，修复原代码中描边颜色无效的问题
    strokeOpacity: 0.4,
    scale: 1,
    rotation: 0,
    anchor: new google.maps.Point(11, 11) // 设置锚点为标记几何中心
  };
  const aircraft = new google.maps.Marker({
    position: { lat: 51.9189046, lng: 19.1343786 },
    map,
    icon: image,
  });

关键说明 #

• 锚点设置逻辑：你的自定义路径宽高范围大致为x:3-22、y:3.5-22，取中心坐标(11,11)作为锚点后，标记会以中心锚定在地图目标位置上，旋转时就不会偏移。如果视觉上仍有偏差，可以微调锚点的x、y值。
• 颜色bug修复：原代码中strokeColor: "000"缺少#前缀，导致描边颜色无法生效，已补全为标准的十六进制颜色格式。

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