React-Google-Map多个信息窗口打开 [英] React-Google-Map multiple Info window open

问题描述

我目前正在使用react-google-maps构建google map api，我想创建多个标记以在信息窗口上显示世界各地城市的信息.但是由于它们全部来自html对象.每当我单击一个标记时，所有信息窗口都会打开.是否有解决此问题的方法?示例代码:

I am currently building a google map api using react-google-maps and I would like to create multiple markers to display info of cities around the world on the info window. But since they are all from the html object. Whenever I clicked on one marker, all info windows will be opened. If there a way to fix this? Sample code:

<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>

推荐答案

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

In your code, onClick of Marker you just call {props.onToggleOpen}, which i hope toggles a flag. Here you should send which marker you are clicking so you need to modify your onClick to something like below

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

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

In the above line, Mark1 should be a unique value that you can use to identify the respective Marker. You can replace this with the marker id or of something that will be unique to the respective Marker.

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

Second, you need to modify onToggleOpen to toggle the flag for the respective marker which is identified by the argument it receives(the unique value you send from `onClick). You can use an array like data structure to store this value.

然后，您需要根据与Marker相对应的标志来显示InfoWindow.考虑到isOpen将是一组标志(在合并了以上更改之后)，因此将使用类似

Then you need to show your InfoWindow based on the flag respective to the Marker. Considering isOpen will be an array of flags(after incorporating the above changes), one would show InfoWindow using condition something like below

<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>

希望可以引导您朝正确的方向前进.

Hope that leads you to a right direction.

这篇关于React-Google-Map多个信息窗口打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！