Реагировать маркер перемещения без повторного рендеринга карты в реагировать-Google-карты - PullRequest
Новая
       31

Реагировать маркер перемещения без повторного рендеринга карты в реагировать-Google-карты

0 голосов
/ 18 октября 2018

Я использую реагировать-Google-карты для отображения маркера из данных широта / долгота.Это работает нормально, но весь компонент рендерит каждый раз, когда обновляются данные маркера.Есть ли способ обновить только маркер?Мой код ниже.Данные поступают быстро, поэтому я обновляю их каждые 10 секунд.Я обновляю маркер и центр одновременно.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions';
import { compose, withProps } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import globalStyles from '../App.css';
import styles from '../styles/ViewMap.module.scss';

class ViewMap extends Component {
  constructor() {
    super();
    this.state = {
      lat: 0,
      long: 0,
      updateMap: true
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(this.state.updateMap){
      return true;
    }
    else {
      return false;
    }
  }

  componentWillUpdate() {
    if (this.state.updateMap) {
      for (var key in this.props.vehicleAggregateData.vehiclesData) {
        if (key === this.props.vin) {
          let latitude = this.props.vehicleAggregateData.vehiclesData[key].position[0];
          let longitude = this.props.vehicleAggregateData.vehiclesData[key].position[1];
          var self = this;
          window.setTimeout(function(){
            self.setState({ updateMap: true, lat: latitude, long: longitude });
          }, 10000);
          self.setState({ updateMap: false});
        }
      }
    }
    else{
      return false;
    }
  }

  render() {
    const MyMapComponent = compose(
      withProps({
        googleMapURL:
          'https://maps.googleapis.com/maps/api/js?key=AIzaSyBitA9VEk3r2trmEW-xXTh_8YDpcIfBwy4&v=3.exp&libraries=geometry,drawing,places',
        loadingElement: <div className={globalStyles.paperCard} />,
        containerElement: <div style={{ height: '100%' }} />,
        mapElement: <div style={{ height: '100%' }} />
        // key:"AIzaSyBitA9VEk3r2trmEW-xXTh_8YDpcIfBwy4"
      }),
      withScriptjs,
      withGoogleMap
    )(props => (
      <GoogleMap defaultZoom={18} defaultCenter={{ lat: parseFloat(this.state.lat), lng: parseFloat(this.state.long) }}>
        {props.isMarkerShown && <Marker position={{ lat: parseFloat(this.state.lat), lng: parseFloat(this.state.long) }} />}
      </GoogleMap>
    ));

    return (
      <div className={styles.map + " " + globalStyles.cardShadow}>
        <MyMapComponent isMarkerShown />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      vehicleAggregateData: state.vehicleData
  };
}

function mapDispatchToProps(dispatch) {
  return {
      actions: bindActionCreators(actions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ViewMap);
...