Question

您好，可以在不显示地图的情况下从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中显示方向？

谢谢

Answer 1

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

不要设置map的{{1}}属性
设置DirectionsRenderer的{{1}}属性

panel

proof of concept fiddle

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

Answer 2

许多“如何在不显示地图的情况下使用地图API”的解决方案？问题假设可以使用setPanel并使旅程计划显示在页面上而不是地图上是可以的。

万一有人想知道，如果您不希望这样做，而只是想从API中提取数据，而根本没有将任何Google html注入到页面中，您仍然需要使用setPanel，但要为它解析一个null。 / p>

directionsDisplay.setPanel(null);

获取并显示方向而不显示Google地图

2 个答案: