Google Maps JavaScript API自定义图标标记旋转功能失效求助

嘿，这个坑我之前踩过！你现在把rotation写在icon的配置对象里，但这个属性确实只对Google内置的SymbolPath图标生效，自定义图片图标根本不识别这个配置。给你两个简单的解决方案：

方法一：直接在Marker上设置rotation（推荐） #

把旋转属性从icon对象里移出来，放到Marker的主配置项里，同时记得设置图标锚点保证旋转中心正确：

var marker = new google.maps.Marker({
  position: latlng,
  map: this.map,
  rotation: heading, // 把旋转属性放在Marker层级！
  icon: {
    url: "assets/icon/nav.png",
    scaledSize: new google.maps.Size(35, 35),
    // 设置锚点为图标中心，避免旋转时偏移
    anchor: new google.maps.Point(17.5, 17.5)
  }
});

Marker本身的rotation属性是支持自定义图片图标的，它会围绕你设置的anchor点旋转。如果不设置锚点，默认会以图标左上角为中心旋转，大概率会出现位置偏移的问题，所以一定要根据你的图标尺寸调整锚点坐标（一般是宽高的一半）。

方法二：用SVG包裹自定义图片（兼容旧API场景） #

如果你的项目依赖较旧版本的Google Maps API，Marker的rotation属性可能不生效，这时候可以把自定义图片嵌入SVG中，再用SVG作为图标使用：

// 生成包含自定义图片的SVG字符串
const svgIcon = `
<svg width="35" height="35" viewBox="0 0 35 35">
  <image href="assets/icon/nav.png" width="35" height="35" />
</svg>`;

var marker = new google.maps.Marker({
  position: latlng,
  map: this.map,
  icon: {
    // 把SVG转成base64作为图标URL
    url: `data:image/svg+xml;base64,${btoa(svgIcon)}`,
    rotation: heading,
    scaledSize: new google.maps.Size(35, 35),
    anchor: new google.maps.Point(17.5, 17.5)
  }
});

因为SVG属于矢量格式，Google Maps的图标系统支持对SVG的旋转配置，这样就能沿用你原来写在icon里的rotation属性了。

额外注意事项 #

• 确认你的自定义图片路径是正确的，相对于当前HTML页面的位置，或者使用绝对路径避免加载失败；
• 测试锚点设置，确保旋转时图标不会偏移到预期外的位置；
• 优先使用方法一，代码更简洁，性能也更好。

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