React Google Maps自定义标记旋转问题求助

我之前帮好几个开发者处理过React Google Maps里自定义SVG标记的坑，刚好碰到和你一模一样的问题，给你整理两个靠谱的解决方案：

一、修复SVG路径无法设置fillColor的问题 #

你遇到的fillColor不生效，其实是Google Maps Marker的icon.path属性的默认行为导致的——它默认只渲染描边，填充透明度fillOpacity是0，所以就算设了fillColor也看不到。

只需要在icon配置里同时明确设置fillColor和fillOpacity（设为1就是完全不透明），再配合stroke属性就行。举个React里的代码例子：

<Marker
  position={yourPosition}
  rotation={yourRotation} // 旋转依然正常生效
  icon={{
    path: "M10,0 L0,20 L20,20 Z", // 三角形路径
    fillColor: "#ff0000", // 填充色
    fillOpacity: 1, // 关键！必须设置填充透明度
    strokeColor: "#000000",
    strokeWeight: 2,
    scale: 1.5
  }}
/>

这样设置后，填充色就会正常显示了。

二、实现多路径的复杂自定义图形 #

如果需要复杂的多路径图形，单条path字符串肯定满足不了，这时候可以用Data URI格式的SVG字符串作为Marker的icon.url，这样就能写任意复杂的SVG结构，而且旋转属性依然能正常作用在整个SVG上。

比如下面的例子，我做了一个带箭头和圆形的复杂标记：

const customSvgIcon = `
  <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
    <!-- 第一个路径：圆形 -->
    <circle cx="15" cy="15" r="10" fill="#4285F4" stroke="#000" stroke-width="2"/>
    <!-- 第二个路径：箭头 -->
    <path d="M15,5 L20,15 L15,25 L10,15 Z" fill="#FFFFFF" />
  </svg>
`;

// 把SVG转成Data URI
const iconUrl = `data:image/svg+xml;base64,${btoa(customSvgIcon)}`;

// 在Marker里使用
<Marker
  position={yourPosition}
  rotation={yourRotation} // 旋转会作用于整个SVG
  icon={{
    url: iconUrl,
    anchor: new window.google.maps.Point(15, 15), // 设置锚点在SVG中心，旋转更准确
    scaledSize: new window.google.maps.Size(30, 30)
  }}
/>

这里要注意几个小细节：

• SVG的viewBox要和width/height对应，避免缩放变形
• 设置anchor为SVG的中心，这样旋转时标记会围绕中心转动，符合你的行驶方向需求
• 用btoa()把SVG字符串转成base64，确保Data URI能被正确解析

最后总结 #

用第一种方法可以快速修复单路径的填充问题，第二种方法则能实现任意复杂的自定义标记，两种方案都能保留你需要的旋转功能，完美适配道路上对象的行驶方向展示需求。

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