5

我目前正在使用 react-google-maps 构建一个谷歌地图 api，我想创建多个标记以在信息窗口上显示世界各地城市的信息。但是由于它们都来自 html 对象。每当我点击一个标记时，所有信息窗口都会打开。如果有办法解决这个问题？示例代码：

<GoogleMap
    defaultZoom={3}
    defaultCenter={{ lat: 40.452906, lng: 190.818206 }}
  >
    <Marker id = "mark1"
      options={{icon: Mark1}} 
      position={{ lat: 34.4076645, lng: 108.742099 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoWindow id = "info1"
                    onCloseClick={props.onToggleOpen}
                    >
                    <div> content1 </div>
      </InfoWindow>}
    </Marker>
    <Marker
      options={{icon: Mark2}} 
      position={{ lat: 35.6958783, lng: 139.6869534 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoWindow
                    onCloseClick={props.onToggleOpen}
                    >
                    <div> content2 </div>
      </InfoWindow>}
    </Marker>
</GoogleMap>
4

1 回答 1

1

在您的代码中，onClick您Marker只需调用{props.onToggleOpen}，我希望它会切换一个标志。在这里，您应该发送您正在单击的标记，因此您需要将您的标记修改onClick为如下所示

onClick={() => { props.onToggleOpen("mark1"); }}

在上面的行中，Mark1应该是一个唯一值，您可以使用它来识别相应的Marker. 您可以将其替换为标记 id 或相应Marker.

其次，您需要修改onToggleOpen以切换marker由它接收的参数标识的相应标志（您从`onClick发送的唯一值）。您可以使用类似数据结构的数组来存储此值。

然后你需要InfoWindow根据相应的标志显示你的Marker. 考虑isOpen将是一组标志（在合并上述更改之后），一个会显示InfoWindow使用条件，如下所示

<Marker id = "mark1"
  options={{icon: Mark1}} 
  position={{ lat: 34.4076645, lng: 108.742099 }}
  onClick={() => { props.onToggleOpen("mark1"); }}
>
  {props.isOpen["mark1"] && <InfoWindow id = "info1"
                onCloseClick={() => { props.onToggleOpen("mark1"); }}
                >
                <div> content1 </div>
  </InfoWindow>}
</Marker>

希望这会引导您走向正确的方向。

于 2017-10-25T16:10:55.267 回答