反应谷歌地图自定义标记旋转

Question

我正在尝试在 React Google Maps 中添加一个自定义标记，并让每个标记根据项目在道路上前进的方向旋转。

当我将 path 用于 svg 而不是 url 引用图像时，我能够使旋转工作。 path 的问题是我无法让fillColor 工作，只有strokeColor。有一个复杂的形状也很好，path 在某种程度上限制了你可以添加到它的形状类型，因为不能将多个路径传递到字符串中。

请注意，heading 正在通过我的 api 获得正确的方向，并且我已经验证它可以正常工作。

这是我当前的代码，不胜感激。谢谢！

const createIcon = (heading) => ({
    width: '15px',
    url: 
 'my image path',
    rotation: heading || 0, // set the rotation prop to indicate direction
});

Answer 1

你有一个正在渲染的 组件吗？这就是我能够为旋转标记所做的工作。 fillColor 也没有问题。

render() {
    return <Marker
        position={{ lat: this.state.longitude, lng: this.state.latitude }}
        icon={
            {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 3,
                strokeColor: "#FFFFFF",
                fillColor: "#0000FF",
                fillOpacity: 1,
                rotation: 215
            }
        }
    />
}