如何在React Google Map上標記單擊的圖釘？

Question

我添加了自定義標記以響應Google Map。 我想做的是在用戶點擊的標記上添加自定義標記。 我嘗試使用狀態，將其設置為false，然后在單擊但沒有運氣時更改為true。

這是地圖的標記部分

import Pin from "../img/pin.svg";
import activePin from "../img/activePin.svg";

    {marker.map(marker => (
        <Marker key={marker.id}
                position={{
                lat: marker.lat,
                lng: marker.lng
                }}
                icon={{
                        url: this.props.showActive ? Pin : activePin
                      }}
                onClick={e => {
                     this.activatePin(marker);
                }}
        />
))}

假設Pin和activePin是具有圖像路徑的變量。 我從API獲得的標記，它們的經度和緯度。

當前單擊不更改圖標，它只是保留為常規圖標。 我應該使用withStateHandlers還是其他方法？

Answer 1

在設置標記的圖標之前，請嘗試執行一個控件，如下所示：

var icon = {}
var condition = this.state.condition // This change by this.activatePin(marker)
if (condition ) {
    icon = {
        //Set here your icon in base the condition
        url: this.props.showActive //.. ... ...
      }
} else {
    //Set here your icon in base the condition
    icon ={
        url: this.props.showActive //.. ... ...
      }
}
marker.map(marker => (
    <Marker key={marker.id}
        position={{
            lat: marker.lat,
            lng: marker.lng
        }}
        icon={icon}
        onClick={e => {
            this.activatePin(marker);
        }}
    />
))