React Google Maps 自定義標記旋轉

Question

我正在嘗試在 React Google Maps 中添加一個自定義標記，並讓每個標記根據項目在路上行駛的方向旋轉。

當我使用 svg path而不是引用圖像的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
            }
        }
    />
}