html - React-Google-Map 多个信息窗口打开

Question

我目前正在使用 react-google-maps 构建一个 google map 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>

Answer 1

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

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

在上面的行中，Mark1 应该是一个唯一的值，您可以使用它来标识相应的 Marker。您可以将其替换为标记 ID 或相应 Marker 所特有的内容。

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

然后您需要根据与 Marker 相关的标志显示您的 InfoWindow。考虑到 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>

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