Question

当我点击地图时，我试图放置标记。 react-google-maps文档不好，我感到困惑。

 class Map extends Component {
  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        center={{ lat: this.props.latitude, lng: this.props.longitude }}
        zoom={13}
      >
        {this.props.markers.map(marker => {
          return <SkateMarker key={marker.title} marker={marker} />;
        })}
      </GoogleMap>
    ));
    return (
      <div>
        <GoogleMapExample
          containerElement={
            <div style={{ height: `500px`, width: "1000px" }} />
          }
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}
export default Map;

Answer 1

以下示例演示了如何使用react-google-maps在地图点击上添加标记：

class MapWithMarkers extends React.Component {
  state = {
    places: []
  };

  addMarker(e) {
   const newPlace = { id: this.state.places.length, lat: e.latLng.lat(), lng: e.latLng.lng() };
    this.setState({
      places: [...this.state.places,newPlace]
    })
  }

  render() {
    return (
      <GoogleMap
        onClick={this.addMarker.bind(this)}
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
        {this.state.places.map(place => {
          return (
            <Marker
              key={place.id}
              position={{ lat: place.lat, lng: place.lng }}
            />
          );
        })}
      </GoogleMap>
    );
  }
}

Demo

当我单击地图的特定部分时，如何在动态Google地图上放置动态标记？

1 个答案: