Как рассчитать маршрут между 2 точками с помощью API направлений Google Maps в моем приложении React без отображения карты? - PullRequest
Новая
       46

Как рассчитать маршрут между 2 точками с помощью API направлений Google Maps в моем приложении React без отображения карты?

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

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

Доступ к выборке в 'https://maps.googleapis.com/maps/api/directions/json?destination=31.922007%2C34.768531&mode=driving&origin=32.087001%2C34.8226326&key=MY_KEY' из источника' http://localhost:3000' был заблокирован политикой CORS: Нет 'Access-ControlЗаголовок -Allow-Origin 'присутствует на запрашиваемом ресурсе.Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса 'no-cors', чтобы получить ресурс с отключенным CORS.

Я видел здесь: Запрос CORS не работает в API-адресах Google что я не могу использовать API таким образом, но я могу использовать службу направления https://developers.google.com/maps/documentation/javascript/directions

import { createClient } from '@google/maps';
import { GOOGLE_GEOCODE_API_KEY } from '../config/keys';

let googleMapsClient;

function initialize() {
    googleMapsClient = createClient({key: GOOGLE_GEOCODE_API_KEY});
}

function getGoogleMapsClient() {
    if (!googleMapsClient) {
        initialize();
    }

    return googleMapsClient;
}

function calcRoute(origin, destination) {
    return getGoogleMapsClient().directions({
        origin: origin,
        destination: destination,
        mode: 'driving',
    });
}

Как я понимаю из документов службы направления, я должен представить карту в своем приложении, чтобы сделатьрасчет маршрута, но я не хочу.Кроме того, документы посвящены JS и я работаю с реагировать.Как я могу сделать расчет в реакции без отображения карты?

1 Ответ

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

Экземпляр карты не является обязательным для использования Служба карт Google Maps , также поддерживается передача элемента <div> для отображения информации о маршруте из документации:

A DirectionsRenderer не только обрабатывает отображение полилинии и любых связанных маркеров, но также может обрабатывать текстовое отображение направлений в виде последовательности шагов.Для этого просто вызовите setPanel () на вашем DirectionsRenderer, передав ему информацию, в которой будет отображаться эта информация.

Вот пример: 

class RouteInfo extends Component {
  constructor(props) {
    super(props);
    this.directionsPanelRef = React.createRef();
    this.directionsDisplay = new google.maps.DirectionsRenderer();
    this.directionsService = new google.maps.DirectionsService();
  }

  componentDidMount() {
    this.directionsDisplay.setPanel(this.directionsPanelRef.current);
    this.displayRoute();
  }

  displayRoute() {
    this.request = {
      origin: "chicago, il",
      destination: "st louis, mo",
      travelMode: google.maps.TravelMode.DRIVING
    };

    this.directionsService.route(this.request, (response, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        this.directionsDisplay.setDirections(response);
      } else {
        console.log("Directions request failed due to " + status);
      }
    });
  }

  render() {
    return (
      <div>
        <div ref={this.directionsPanelRef} />
      </div>
    );
  }
}

Здесь демо

...