Динамически добавлять, обновлять, удалять маркеры в реакции-Google-карты - PullRequest
Новая
       23

Динамически добавлять, обновлять, удалять маркеры в реакции-Google-карты

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

Глядя на документы о act-google-maps , я смог собрать воедино некоторый код для отображения карты со статическими данными.Теперь мне нужно внести изменения в карту на основе новых данных, поступающих из API или периодических обновлений, и не вижу никаких разговоров о том, как это сделать.

Чтобы создать первоначальное приложение, я создал «npx create-реагировать-приложение xxx», чтобы создать приложение, а затем добавил необходимые пакеты npm для реагирования-google-maps.Вот основной код: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"


let markers = []

function createMarkers(numMarkers){

    for(let i = 0; i < numMarkers; i++){
        markers.push(<Marker key={i} position={{ lat: 45.123 + (i * 0.005), lng: -75.987 }} />)
    }

    return markers;
}

setInterval(function(){ 
  if(markers.length > 0 && markers[0].props.position){
    let marker = markers[0];
    //debugger;
    let position = marker.props.position;
    position.lat = position.lat - 0.005;
    position.lng = position.lng - 0.005;
    marker.props.position = position;
  }
}, 1000)

const MyGreatMap = withScriptjs( withGoogleMap(props => <GoogleMap
      defaultZoom={14}
      defaultCenter={{ lat: 45.123, lng: -75.978 }}
    >
      {createMarkers(10)}
    </GoogleMap>));


ReactDOM.render(
  <MyGreatMap 
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDS-TFZqRfUx9xPXTJrPH6eml-gGo-btZ0"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `800px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />, 
  document.getElementById('root'));

Когда я обновляю реквизит, ничего не происходит.Я уверен, что это неправильно, и это должно как-то обновлять состояние, но информация о лат / лнг в маркерах - это реквизит.

Каков наилучший способ обновления вещей в Reaction-Google-Maps?Google maps в целом - это API с интенсивным использованием JavaScript, поэтому я не знаю, может ли он работать «по реакции».Каков наилучший способ внести изменения в реакции-google-карты, чтобы заставить их эффективно повторно выполнить рендеринг с изменениями?

1 Ответ

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

Я уверен, что это неправильно, и это должно как-то обновлять состояние, но информация о лат / лнг в маркерах - это реквизит.

верно, markers необходимо перевести в локальное состояние , для этого может быть введен компонент, который принимает markers реквизиты как начальное состояние и затем состояние обновляется следующим образом: 

class MapWithMarkers extends React.Component {
  constructor(props) {
    super(props);
    this.state= {markers: this.props.markers};   //1.initialize initial state from props
  }

  updateMarker() {
      this.setState(prevState => {
        const markers = [...prevState.markers];
        markers[index] = {lat: <val>, lng: <val>};
        return {markers};
     })
  }

  componentDidMount() {
    this.intervalId = setInterval(this.updateMarker.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }

  render() {
    return (
      <Map center={this.props.center} zoom={this.props.zoom} places={this.state.places} />
    ); 
  }
}

Демо

...