Как установить путь с координатами, который приходит из API - PullRequest
Новая
       47

Как установить путь с координатами, который приходит из API

0 голосов
/ 13 января 2020

что я хочу, чтобы мой код делал:

  1. Выборка координат из API (я сделал)
  2. Поместите эти координаты в массив (я сделал)
  3. Нарисуйте линию в Google Maps с этими координатами (я тоже сделал, но не с координатами из API)

Кто-нибудь, кто может мне помочь? Большое спасибо! 

import React from 'react';
import { 
  GoogleMap, 
  withScriptjs, 
  withGoogleMap, 
  Marker,
  Polyline} 
from 'react-google-maps';
import '../App.css';
import { Link } from "react-router-dom"; 


class Map extends React.Component {
  
  async componentDidMount(){
    const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=10";
    const response = await fetch(url);
    const data = await response.json();
 
    const coordinatesList = []
    data.forEach(coor => {
       coordinatesList.push({ lat: coor.lat, lng: coor.lng })
    })
 
    this.setState({coordinates: coordinatesList, loading: false });      
 }


  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
        >
          <Polyline path={this.coordinatesList} options={{ strokeColor: "#FF0000 " }} />
          <Marker position={this.coordinatesList[this.coordinatesList.length - 1]} />
          
      </GoogleMap>
    )
  }
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default() => (  
  <div>
    <div style={{width: '50vw', height: '50vh'}}> 
      <WrappedMap googleMapURL = {'https://maps.googleapis.com/maps/api/js?key=AIzaSyB9w0T_VMezCy1AaqxXpRie9ChrbVCt1O4&v=3.exp&libraries=geometry,drawing,places'}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `100%` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  </div>
  )
...