单击 google-maps-react 中的列表位置项时尝试显示 infoWindow答案

【问题标题】：Try to display infoWindow when click on a list location item in google-maps-react单击 google-maps-react 中的列表位置项时尝试显示 infoWindow
【发布时间】：2019-01-18 03:01:09
【问题描述】：

我的问题是包（google-maps-react）具有显示信息窗口的默认功能

onMarkerClick = (props, marker, e) =>
  this.setState({
    selectedPlace: props,
    activeMarker: marker,
    showingInfoWindow: true
  });

以及具体的称呼方式

<Marker onClick={this.onMarkerClick} />

如果我 console.log(ActiveMarker) 我在照片上得到这个对象enter image description here.. 谁能解释它是什么？因为我想用参数调用这个函数，我无法检索这个对象以将它传递给另一个函数。我需要这个，因为我想在另一个处理列表位置项目点击的函数中调用 onMarkerClick .. 提前谢谢你：slightly_smiling_face：

【问题讨论】：

标签： javascript reactjs infowindow google-maps-react

【解决方案1】：

activeMarker 对象为您提供有关您选择的标记的信息（地址、位置等）。在示例中，https://tomchentw.github.io/react-google-maps/#infowindow，我注意到他们有一个 infoWindow 元素，该元素根据属性显示/隐藏 - 你的代码中有什么地方可以切换它吗？

<InfoWindow
  marker={this.state.activeMarker}
  visible={this.state.showingInfoWindow}>
    <div>
      <h1>{this.state.selectedPlace.name}</h1>
    </div>
</InfoWindow>

您当前正在更新状态以捕获标记和 selectedPlace。要触发 infoWindow 从另一个函数弹出，您只需要切换显示InfoWindow 值。您还可以检索标记信息，因为它现在是您的状态的一部分。

【讨论】：

谢谢，但我正在使用另一个 npm 包。它的文档是这个npmjs.com/package/google-maps-react
react-google-maps，google-react-maps - 哎呀！我已经更新了答案。

【解决方案2】：

您可以随时将信息传递给新函数，例如

......
markerClicked(marker) {
   console.log('marker', marker);
   this.setState({
     activeMarker: marker,
     showingInfoWindow: true,
     selected_pin_lat: marker.position.lat(),
     selected_pin_lng: marker.position.lng(),,
   });
}

......
<Marker
  key={index}
  name={pin.type}
  position={{ lat: pin.location[0], lng: pin.location[1] }}
  onClick={(props, marker, clickEvent) => this.markerClicked(marker)}
  icon={
    new window.google.maps.MarkerImage(
      ICONS.mapPinIcon,
      null,
      null,
      null,
      new window.google.maps.Size(30, 30),
    )
  }
/>
......

【讨论】：