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

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

Доступ к выборке по адресу 'https://maps.googleapis.com/maps/api/directions/json?destination=31.922007%2C34.768531&mode=driving&origin=32.087001%2C34.8226326&key=MY_KEY' из источника '» заблокирован политикой 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, и я работаю с React. Как я могу сделать расчет в реакции без отображения карты?


reactjs google-maps google-directions-api react-google-maps directions
person Zohar Bergman    schedule 24.12.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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>
    );
  }
}

Вот демонстрация

person Vadim Gremyachev    schedule 25.12.2018