Question

我有一个项目，通过谷歌地图方向服务生成路线，我有一个循环来获取沿它的所有坐标（使用一个名为showPathInfo的函数 - 查看完整HTML的查询基础）：

var tp = result.routes[0].legs[i].steps[j].path[k]; // local variable
var z = new google.maps.LatLng(tp.lat(),tp.lng());  // local variable

我希望在每次循环迭代期间使用以下方法调用高程服务：

elevation = getElevation(z);  // global variable but NOT an array

其中getElevation是一个函数（参见完整HTML查询的基础）。

由于某种原因，即使coords正确地传递给函数，并且被适当地呈现到getElevationForLocations对象中（我已经通过在getElevationForLocations调用之前使用getElevation返回变量来检查它）;

服务返回“undefined”

return results[0].elevation;

我感兴趣的是让这个解决方案能够利用为单个提升服务请求提供的更高精度，并尝试避免将位置[]作为完整数组或使用getElevationForPath函数的批处理请求。

不可否认，存在每秒可以进行的单个提升请求数量限制的问题，但我尝试减慢代码执行速度并限制距离以使其至少工作一旦：

function wait() { setTimeout(function () { 
elevation = getElevation(z); // here defined as a global variable
}, 500);}
wait();

有没有人有任何想法为什么这样的嵌套调用不起作用？

完整的小提琴html代码如下：

<!DOCTYPE html>
<html><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

var rendererOptions = { draggable: true };
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;
var elevation; // *******************
var elevator;

var start = new google.maps.LatLng(55.60289406109326, -2.88885779678822);
var wpnt1 = new google.maps.LatLng(55.59226543103951, -2.91247397661209);
var wpnt2 = new google.maps.LatLng(55.57330299699533, -2.88813963532448);
var wpnt3 = new google.maps.LatLng(55.58132161006218, -2.84357875585556);
var wpnt4 = new google.maps.LatLng(55.58602383263128, -2.87256672978401);
var wpnt5 = new google.maps.LatLng(55.60450928199337, -2.89154000580311);
var ended = new google.maps.LatLng(55.60289406109326, -2.88885779678822);

function initialize() {
elevator = new google.maps.ElevationService();
var mapOptions = { zoom: 10,center: start };

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
document.getElementById('points').innerHTML = "";
showPathInfo(directionsDisplay.getDirections());
});

calcRoute();

} // ***** End of initialise function

function calcRoute() {

var request = {origin: start,destination: ended,
waypoints:[{location: wpnt1}, {location: wpnt2}, {location: wpnt3}, {location: wpnt4}, {location: wpnt5}],
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
}
});
}

function showPathInfo(result) {
var total = 0;
var ns = 0;
var pt = 0;
var myroute = result.routes[0];
document.getElementById('points').insertAdjacentHTML('beforeend', '<th>Point</th><th>Lat</th><th>Lon</th><th>Elevation</th>');
for (var i = 0; i < myroute.legs.length; i++) {
  total += myroute.legs[i].distance.value;
  ns    += myroute.legs[i].steps.length;
    for (var j = 0; j < myroute.legs[i].steps.length; j++) {
        for (var k = 0; k < myroute.legs[i].steps[j].path.length; k++) {

        var tp = myroute.legs[i].steps[j].path[k];
        var z = new google.maps.LatLng(tp.lat(),tp.lng());

        //function wait() { setTimeout(function () {

        elevation = getElevation(z);

        //}, 500);}  // End of getAndWait
        //wait();

        document.getElementById('points').insertAdjacentHTML('beforeend',
        '<tr><td>' + pt + '</td><td>' +
        tp.lat().toFixed(7) + '</td><td>' +
        tp.lng().toFixed(7) + '</td><td>' +
        elevation + '</td></tr>');
        pt += 1;
        }
    }
}
total = total / 1000.0;
document.getElementById('total').innerHTML = total + ' km';
document.getElementById('legs').innerHTML = myroute.legs.length;
document.getElementById('steps').innerHTML = ns;
}

function getElevation(z) {
var locations = [];
var clickedLocation = z;
locations.push(clickedLocation);
var positionalRequest = { 'locations': locations }

elevator.getElevationForLocations(positionalRequest, function(results, status) {

if (status == google.maps.ElevationStatus.OK) {

  // Retrieve the first result
  if (results[0]) {

    return results[0].elevation;

  } else {
    return 'No results found';
  }
} else {
  return 'Elevation service failed due to: ' + status;
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 25%">
<p>Total Distance: <span id="total"></span> Legs: <span id="legs"></span>Steps: <span id="steps"></span></p>
<table id="points"></table>
</div>
</body>
</html>

Answer 1

后记

最后，使用了一个有效的Bluebird promise循环。

whereHas()

对于记录我没有使用node.js或除了普通的js和bluebird之外的任何其他功能。 StackOverflow中的许多答案都详细讨论了Promise，因此我建议您阅读这些内容并查看API：https://github.com/petkaantonov/bluebird/blob/master/API.md。

谷歌地图方向服务不允许嵌套普通js调用提升服务

1 个答案: