在不显示谷歌地图的情况下获取并显示方向答案

【问题标题】：Get and show direction without showing a google map在不显示谷歌地图的情况下获取并显示方向
【发布时间】：2019-02-01 06:19:00
【问题描述】：

您好，是否可以在不显示地图的情况下从 googlemaps 获取方向？

我可以通过这样的电话获得路线：-

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 中显示方向？

谢谢

【问题讨论】：

标签： javascript json google-maps-api-3

【解决方案1】：

使用 Google Maps Javascript API v3 在没有地图的情况下显示路线文本：

不要设置DirectionsRenderer 的map 属性
设置DirectionsRenderer的panel属性

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

proof of concept fiddle

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>

【讨论】：

【解决方案2】：

解决了很多“如何使用地图API而不显示地图？”问题假设可以使用 setPanel 并且旅程计划会出现在您的页面而不是地图上。

如果有人想知道，如果您不想要这个并且只想从 API 中提取数据而根本没有将任何 google html 注入到您的页面中，您仍然需要使用 setPanel，但将其解析为 null。

directionsDisplay.setPanel(null);

【讨论】：