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

Question

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

当我使用pathsvg 而不是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

你有一个正在渲染的 <\Marker> 组件吗？这就是我能够为旋转标记所做的工作。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
            }
        }
    />
}