Можно ли переместить компонент реагирования на карту, изменив его статус? - PullRequest
Новая
       41

Можно ли переместить компонент реагирования на карту, изменив его статус?

0 голосов
/ 10 ноября 2019

Я использую Google-Maps-React и хочу переместить компонент грузовика на карту, изменив координаты компонента. Координаты являются частью состояния компонента Грузовик, и я изменяю их с помощью таймера.

На карте я могу показать координаты и вижу, что они меняются, но положение грузовика не меняется, этоstatic в начальных координатах, с которыми я вызвал компонент.

Мне нужна функция в компоненте Map и передать ее в качестве параметра компоненту Truck, но я не знаю, как обновить компонент карты с помощьюэта функция. Это компонент карты: 

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import Camion from './Camion.jsx';


const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyMap extends Component {
  static defaultProps = {
    center: {
      //lat: 59.95,
      //lng: 30.33
      lat: -37.707635,
      lng: -68.902851
    },
    zoom: 18
  };

  render() {
    return (
      // Important! Always set the container height explicitly
<div class="ui raised segment">
      <div style={{ height: '75vh', width: '100%' }}>

        <GoogleMapReact
          bootstrapURLKeys={{ key: "AIzaSyAZ1fqQNu8zkeCbiaeIDVOcmK91uYObuUk" }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <Truck />
          <AnyReactComponent
            lat={-37.707635}
            lng={-68.902851}
            text=<i class="truck icon"></i>
          />

        </GoogleMapReact>
      </div>
</div>
    );
  }
}   
export default MyMap;

А это мой компонент грузовика: 

import React, { Component } from 'react';

export default class Truck extends Component {
  constructor(props) {
    super(props);
    this.state = {lat: -37.707635, lng:-68.902851};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      500
    );
  }
  componentWillUnmount() {
      clearInterval(this.timerID);
    }

  tick() {
    this.setState({
        lat: this.state.lat + 0.000001
      , lng: this.state.lng + 0.000001
    });
  }
  render() {
    return (
      <div>
        <i class="truck icon"></i>
        <p> {this.state.lat}.</p>
      </div>
    );
  }
}
...