如何在反应谷歌地图上标记点击的图钉？答案

【问题标题】：How to mark clicked pin on react google map?如何在反应谷歌地图上标记点击的图钉？
【发布时间】：2019-11-30 12:31:01
【问题描述】：

我添加了自定义标记来响应谷歌地图。我想要做的是在用户点击的一个上添加自定义标记。我尝试使用状态，将其设置为 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 获得的 lat 和 lng。

当前单击不更改图标，它只是保持常规图标。我应该使用 withStateHandlers 还是有其他方法？

【问题讨论】：

如果您还可以发布获得标记变量的位置以及定义activatePin的位置会更容易
我刚刚编辑了问题。我正在从 api 获取位置，并且应该从本地文件夹加载图像。

标签： reactjs react-google-maps

【解决方案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);
        }}
    />
))

【讨论】：