React 中的 Google Map API：如何为每个标记分配 InfoWindow

Question

我从create-react-app 开始我的项目，并安装了google-maps-react。
现在我想为 每个 标记分配 InfoWindow，这样我就可以一次显示很多。 （也许答案很明显，但对我来说不是......）
我的代码：

export class MapContainer extends Component {
  render() {
    return (
      <Map
        className={'map'}
        google={this.props.google}
        zoom={13}
        initialCenter={{lat: 54.753986, lng: 24.670219}}
        style={nullStyle}
      >
        {this.props.places.map(place => (
          <Marker
            key={`marker-${place.name}`}
            title={place.title}
            name={place.name}
            position={place.position}
          />
        ))}
        {this.props.places.map(place => (
          <InfoWindow
            key={`infowindow-${place.name}`}
            marker={_JUST_BEFORE_CREATED_MARKER_}
            visible={true}>
            <div>{place.title}</div>
          </InfoWindow>
        ))}
      </Map>
    )
  }
}

Answer 1

要将信息窗口与标记相关联，请将其呈现在 <Marker> 中，以下示例演示如何为每个标记实例化信息窗口：

<GoogleMap
    defaultZoom={5}
    defaultCenter={new google.maps.LatLng(-25.0317893, 115.219989)}>

    {props.places.map(place => (
        <Marker
            key={`marker-${place.name}`}
            title={place.title}
            name={place.name}
            position={place.position}

        >
            <InfoWindow
                key={`infowindow-${place.name}`}
                visible={true}>
                <div>{place.title}</div>
            </InfoWindow>
        </Marker>
    ))}

</GoogleMap>

Demo