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

IT技术 html reactjs marker infowindow react-google-maps
2021-04-28 23:37:36

我目前正在使用 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>
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>

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

其它你可能感兴趣的问题
上一篇React 将 JQuery 代码应用于组件内的元素 下一篇如何在es6中启用ts-check