如何在react google地图上标记被点击的图钉？
如何在react google地图上标记被点击的图钉？
提问于 2019-07-22 21:54:17
我有自定义标记添加到反应谷歌地图。我正在尝试做的是添加一个自定义标记，用户点击。我尝试使用state，将其设置为false，然后在单击时更改为true，但没有成功。
这是Map的标记部分
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是指向图像的路径的变量。标记，它们的lat和lng我是从API得到的。
当前点击不改变图标，它只是停留在常规图标。我应该使用withStateHandlers吗?还是有其他方法？
回答 1
Stack Overflow用户
发布于 2019-07-23 21:29:55
尝试在设置标记图标之前执行一个控件，如下所示：
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);
}}
/>
))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57147579
复制相关文章
相似问题
腾讯云开发者
