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

概述我目前正在使用react-google-maps构建谷歌地图api,我想在信息窗口创建多个标记来显示世界各地的城市信息.但因为它们都来自html对象.每当我点击一个标记时,所有信息窗口都将被打开.如果有办法解决这个问题？示例代码： <GoogleMap defaultZoom={3} defaultCenter={{ lat: 40.452906, lng: 190.818206 我目前正在使用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>

解决方法 在你的代码中,onClick of Marker你只需要调用{props.onToggleOpen},我希望切换一个标志.在这里,您应该发送您要点击的标记,这样您就需要将onClick修改为如下所示

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

在上面的行中,Mark1应该是一个唯一值,您可以使用它来标识相应的标记.您可以使用标记ID或对相应标记唯一的内容替换它.

其次,您需要修改onToggleOpen以切换相应标记的标志,该标记由它接收的参数标识(您从`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>

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

总结

以上是内存溢出为你收集整理的html – React-Google-Map打开多个信息窗口全部内容，希望文章能够帮你解决html – React-Google-Map打开多个信息窗口所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。