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

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

1 个答案: