Блог

Я создавал интерфейс приложения, в котором включен Google maps API. Я хочу, чтобы пользователь нажимал на карту, чтобы добавить маркеры, и сохранял ее в массив; Однако после того, как я реализовал функцию добавления маркера в onClick тега Google map… Маркеры не отображаются.

У меня возникли большие трудности с реализацией функции добавления маркера в react, и я просмотрел несколько руководств, но, похоже, не могу найти решение. Любая помощь была бы очень признательна!

     const options = {
        styles: mapStyles,
        disableDefaultUI: true,
        zoomControl: true,
    }

    var markersArray = [];
    function addMarker(event){
            let marker = new window.google.maps.Marker({
            position: event.latLng,
            time: new Date(),
            draggable: true
        });
        markersArray.push(marker);
    }


    const Map = withScriptjs(withGoogleMap(props =>
        <GoogleMap
          defaultZoom={8}
          defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
          options={options}
          onClick={(event) => {
            console.log(event);
            console.log(markersArray);
            addMarker(event);
        }}
        >

        {markersArray.map((marker) =>(
            <Marker
                key={marker.time.toISOString()}
                position={{lat: marker.lat, lng: marker.lng }}
            />
        ))}

        <AutoComplete
            style={{width: "100%", height:'40px'}}
            types={['(regions)']}
            onPlaceSelected={this.onPlaceSelected}
        />

        </GoogleMap>
      ));
      
  

Я считаю, что проблема в этом, но я не уверен, как заставить это работать.

         {markersArray.map((marker) =>(
            <Marker
                key={marker.time.toISOString()}
                position={{lat: marker.lat, lng: marker.lng }}
            />
        ))}
  

markersArray это обычный массив. Когда вы это делаете addMarker(event); , вы не обновляете состояние своего компонента, это просто обычный массив. Так что, вероятно, React не знает об этом изменении. Если вы используете хуки, вы могли бы создать состояние с вашими маркерами следующим образом

 const [markers, setMarkers] = useState([])
  

используйте этот markers массив для рендеринга <Marker /> , а затем на вашем мероприятии, чтобы добавить маркер

 onClick={(event) => {
  setMarker(previousMarkers => previousMarkers.concat([event]))
}
  

это вызовет повторный рендеринг с новым значением markers , и вы сможете их увидеть.

Если это не функциональный компонент, а классы, это одно и то же, но вы бы определили маркеры в состоянии вашего класса

 constructor(props) { 
  super(props)
  this.state = { markers: [] }
  this.addMarker = this.addMarker.bind(this)

}

// function class below
addMarker(marker) {
  this.setState(previousState => previousState.concat([marker])
}
  

и в вашем случае вы бы вызвали this.addMarker(marker)