Google Maps React, добавление маркеров с лат

Question

Я использую "Google-карты-реагировать" и пытаюсь добавить новые маркеры на мою карту с помощью кликов.

В настоящее время мне удается настроить консольный журнал для конкретного latLng, но, похоже, не могу создать новый. Я довольно новичок в React.

Мой onMapClick работает с поиском широты и долготы. Но я думаю, что мне нужно добавить позицию в массив, а затем использовать ее для обновления карты. Может быть не так

  onMapClick = (map,maps,e) => { 
    const { latLng } = e; 
    const latitude = e.latLng.lat(); 
    const longitude = e.latLng.lng(); 
    console.log(latitude + ", " + longitude);  

    var marker = new window.google.maps.Marker({
      position: e.latLng,
      setMap: map,
    });
  }

Решение, на котором я сейчас нахожусь, заключается в том, что я просто жестко закодировал некоторые маркеры в моем рендере () с расположением массива в маркере

   <Marker
      onClick={this.onMarkerClick}
      name={storedLocations[0]}
      position={{lat:listLatitude[0], lan:listLongitude[0]}}
    />   

Мое информационное окно:

<InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
       onClose={this.onClose}
     >
      <div>
        <h4>{this.state.selectedPlace.name}</h4>
      </div>
    </InfoWindow>
  </Map>

Answer 1

Мой onMapClick работает с поиском широты и долготы. Но я думаю, мне нужно добавить позицию в массив, а затем использовать эту обновить карту.

Это действительно был бы способ React, но вместо создания экземпляров маркеров через Google Maps API, рассмотрите возможность сохранения данных (местоположения маркеров) через state, а React сделает все остальное, как это:

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      locations: []
    };
    this.handleMapClick = this.handleMapClick.bind(this);
  }

  handleMapClick = (ref, map, ev) => {
    const location = ev.latLng;
    this.setState(prevState => ({
      locations: [...prevState.locations, location]
    }));
    map.panTo(location);
  };

  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onClick={this.handleMapClick}
        >
          {this.state.locations.map((location, i) => {
            return (
              <Marker
                key={i}
                position={{ lat: location.lat(), lng: location.lng() }}
              />
            );
          })}
        </Map>
      </div>
    );
  }
}

Пояснение:

• locations состояние используется для отслеживания всех местоположений после нажатия на карту

• locations состояние передается компоненту Marker для визуализации маркеров

Следующим шагом может быть введение отдельного компонента для списка маркеров, Thinking in React говорит о компонентах следующее:

Одним из таких методов является принцип единой ответственности, то есть в идеале компонент должен делать только одно. Если это в конечном итоге растет, это следует разложить на более мелкие подкомпоненты.

const MarkersList = props => {
  const { locations, ...markerProps } = props;
  return (
    <span>
      {locations.map((location, i) => {
        return (
          <Marker
            key={i}
            {...markerProps}
            position={{ lat: location.lat(), lng: location.lng() }}
          />
        );
      })}
    </span>
  );
};

Вот демонстрационная версия , которая демонстрирует, как добавить создателей на карту, кликнув через google-maps-react library