javascript - 在 InfoWindow 中添加更多信息

Question

所以我一直在使用 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 ， 我怎么做？因为如果我传入 m在onClick()他说props和 marker失踪了……

请指导我。

Answer 1

好吧，我通过分析他是如何获得所有信息的，稍微弄明白了一点。我已经看到 props 的值在 onMarkerClick() 中打印出来所有 Prop 都来自<Marker />本身，所以我添加了一个数据 prop用我的值(value)m

这就是我的 <Marker />现在看起来像:

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

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