Получить и показать направление, не показывая карту Google

Question

Привет, можно ли получить направление из GoogleMap без отображения карты?

Я могу узнать, как звонить: -

https://maps.googleapis.com/maps/api/directions/json?origin=52.4076963,-1.4853391999999985&destination=52.6114729,-1.6812878000000637&key=KEYHERE

<div id="result"></div>

И код, который я пытаюсь вызвать, это:

function calcRoute() {
    var start = "52.4076963,-1.4853391999999985";
    var end = "52.6114729,-1.6812878000000637";
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var result = document.getElementById('result');
            result.innerHTML= "";
            for (var i =0; i < response.routes[0].legs[0].steps.length; i++){
                result.innerHTML+=response.routes[0].legs[0].steps[i].instructions+"<br>"
            }
            console.log(response)
            directionsDisplay.setDirections(response);
        }
    });
}

calcRoute();

Как мне заставить это работать с calcRoute и просто показать направление в div?

Спасибо

Answer 1

Решение для многих "как использовать API карт, не показывая карту?"Вопросы предполагают, что будет нормально использовать setPanel и чтобы план поездки отображался на вашей странице вместо карты.

В случае, если кому-то интересно, если вы этого не хотите и просто хотите извлечь данные из API без какого-либо gtml-кода google, внедренного на вашу страницу вообще, вам все равно нужно использовать setPanel, но анализировать ноль дляит.

directionsDisplay.setPanel(null);

Answer 2

Чтобы отобразить текст с указаниями без карты с помощью API JavaScript Google Maps v3:

1. не устанавливайте свойство map для DirectionsRenderer
2. , установитеpanel свойство DirectionsRenderer

function calcRoute() {
  var directionsService = new google.maps.DirectionsService();
  var start = "52.4076963,-1.4853391999999985";
  var end = "52.6114729,-1.6812878000000637";
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var directionsDisplay = new google.maps.DirectionsRenderer();
      directionsDisplay.setPanel(document.getElementById('result'));
      directionsDisplay.setDirections(response);
    }
  });
}

доказательство концепции скрипки

function initialize() {
  function calcRoute() {
    var directionsService = new google.maps.DirectionsService();
    var start = "52.4076963,-1.4853391999999985";
    var end = "52.6114729,-1.6812878000000637";
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setPanel(document.getElementById('result'));
        directionsDisplay.setDirections(response);
      }
    });
  }

  calcRoute();
}
google.maps.event.addDomListener(window, "load", initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="result"></div>