在 InfoWindow 中添加更多信息答案

【问题标题】：Adding more info in InfoWindow在 InfoWindow 中添加更多信息
【发布时间】：2019-07-27 07:17:05
【问题描述】：

所以我已经和google-maps-react 合作了几个月，一切都很好，现在有一点我不明白。这可能就是我无法做到这一点的原因。

这是我的<InfoWindow> 的结构：

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

所以这很好，可以显示标题，但我想要更多信息。

这是我的setState() 以获取该信息，以及当我点击<Marker /> 时触发的功能：

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

我只是这样称呼它：

onClick={this.onMarkerClick}

但我不明白，这些值（props 和 marker）从何而来？我怎样才能在其中传递另一个值？假设我想传入m，我该怎么做？因为如果我在onClick() 中传入m，他会说props 和marker 丢失了...

请指导我。

【问题讨论】：

标签： javascript reactjs google-maps-react

【解决方案1】：

好的，所以我通过分析他是如何获得所有信息的，稍微弄清楚了一点。我已经看到在onMarkerClick() 中打印出的props 的值是<Marker /> 本身的所有道具，所以我添加了一个数据prop，其中包含我的值m。

这就是我的<Marker /> 现在的样子：

<Marker
  key={uuidv1()}
  position={{ lat: m.x, lng: m.y }}
  title={m.title}
  data={m}
  onClick={this.onMarkerClick}
/>

现在在onMarkerClick 我可以简单地做props.data 并且我可以访问所有信息。

【讨论】：