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>

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