Как я могу поставить динамические маркеры на реакции-Google-карты, когда я нажимаю на определенную часть карты? - PullRequest
Новая
       43

Как я могу поставить динамические маркеры на реакции-Google-карты, когда я нажимаю на определенную часть карты?

0 голосов
/ 21 декабря 2018

Я пытаюсь поставить маркер, когда нажимаю на карту.Документация о реакциях на 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;

1 Ответ

0 голосов
/ 27 декабря 2018

В следующем примере показано, как добавить маркер на карте, используя 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>
    );
  }
}

Демо

...