Question

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

Answer 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-Google-Map打开多个信息窗口

1 个答案: