Отображение маршрутов с React Google Maps - PullRequest
Новая
       52

Отображение маршрутов с React Google Maps

0 голосов
/ 25 февраля 2019

Я новичок в React и пытаюсь использовать карты Google для отображения направлений.Мне удалось заставить его отображать один маркер, но я не нашел, как перенастроить код для отображения направлений.Ниже моя последняя попытка, но она будет отображать только карту ... любая помощь приветствуется: 

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'react-google-maps';
class Map extends Component {
   render() {
   const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
        defaultZoom = { 13 }
      >

<DirectionsRenderer origin={{ lat: 40.756795, lng: -73.954298 }} destination={{ lat: 41.756795, lng: -78.954298 }} />
      </GoogleMap>
   ));
   return(
      <div>
        <GoogleMapExample
          containerElement={ <div style={{ height: `500px`, width: '500px' }} /> }
          mapElement={ <div style={{ height: `100%` }} /> }
        />
      </div>
   );
   }
};
export default Map;

У меня есть ключ API в теге script в index.html

1 Ответ

0 голосов
/ 25 февраля 2019

DirectionsRenderer компонент не принимает origin и destination реквизит, вместо этого необходимо указать directions реквизит, значение которого представляет ответ от DirectionsService, например: 

<DirectionsRenderer
      directions={this.state.directions}
 />

где 

const directionsService = new google.maps.DirectionsService();

const origin = { lat: 40.756795, lng: -73.954298 };
const destination = { lat: 41.756795, lng: -78.954298 };

directionsService.route(
  {
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  },
  (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result
      });
    } else {
      console.error(`error fetching directions ${result}`);
    }
  }
);

Демо

...