关闭单个标记“react-google-maps”上的打开信息窗口答案

【问题标题】：Close open info window on individual markers 'react-google-maps'关闭单个标记“react-google-maps”上的打开信息窗口
【发布时间】：2017-05-14 23:53:21
【问题描述】：

我正在使用 React-Google-Maps。我试图让我的信息窗口在每次单击标记时打开和关闭。当我映射我的数据并调用一个函数来更改单击时布尔值的值时，我在我的对象上设置了一个 showInfo 键。尝试显示我的信息窗口时，这似乎不起作用。有什么建议么？代码在这里。

渲染（）{ 常量标记 = this.props.markers.map((item, i) => {

  const marker = {
    position: {
      lat: item.position.lat,
      lng: item.position.lon
    },
      title: item.title,
      showInfo: false,
      price: `${item.price}/day`,
      images: `http://res.cloudinary.com/letitmow/image/upload/w_40,h_40/${item.images[0]}.jpg`,
  }
  return <Marker
  onClick={()=> {marker.showInfo = !marker.showInfo}}
  {...marker}>
 {marker.showInfo && (
  <InfoWindow
   onCloseClick={()=>{marker.showInfo = !marker.showInfo}}
   >
    <Link to={`/listings/${item._id}`}>
      <div>
        <h2>{marker.title}</h2>
        <img src={marker.images} />
        <h3>{marker.price}</h3>
      </div>

    </Link>

  </InfoWindow>
)}
  </Marker>
});

【问题讨论】：

标签： google-maps reactjs

【解决方案1】：

单击标记时，您似乎需要运行一些逻辑。现在只要单击标记，marker.showInfo 设置为 false 并且相应的 InfoWindow 不呈现。

相反，也许可以尝试创建一个在单击标记时调用的函数。您可以将其称为类似于“handleMarkerTap”的名称

一些快速代码可以为您提供以下想法：

改变你的点击次数：

onClick={() => handleMarkerTap(currentMarker)}
onCloseClick={() => handleMarkerTap(currentMarker)}

创建一个接收标记对象并切换 showInfo 属性的函数。

handleMarkerTap(marker) {

  if (marker.showInfo === false) {
    marker.showInfo = true
  } else if (marker.showInfo === true) {
    marker.showInfo = false
  }
}

现在，当单击标记时，该标记的 showInfo 属性应设置为 true，并且您的 InfoWindow 应呈现。

我希望这会有所帮助！

【讨论】：