JavaScript异步帮助-Google Maps JavaScript API计算路线

我对JavaScript还是很陌生,所以这里是有关上下文问题的摘要。用户输入两个位置,originInputdestinationInput。然后,Places API会获取位置的Latlng,这将按预期工作。当试图使用这些结果来计算两者之间的方向时,我的问题来了。据我所知,问题在于calcRoute函数正在之前执行,而Places对象是从Places API返回的,这需要花费时间。假设这是问题所在,我不知道该如何解决。

到目前为止,我已经尝试将Places API返回的值附加到数组,然后将其用作Directions API的参数。

HTML:

<input type="text" id="originInput"></input>
<input type="text" id="destinationInput"></input>
<button onclick="initMap()"></button> 

<div id="map"></div>

相关JS:

// function takes user input and gets back a place object from the API
function getPlaces() {
  var originInput = document.getElementById("originInput");
  var destinationInput = document.getElementById("destinationInput");
  var requests = {
    request1: {
      query: originInput.value,fields: ['name','geometry']
    },request2: {
      query: destinationInput.value,'geometry']
    }
  };
  placeService.findPlaceFromQuery(requests.request1,callback);
  placeService.findPlaceFromQuery(requests.request2,callback);
  // Calls calcRoute function to display the route between points
  calcRoute(resultsLatlng[0],resultsLatlng[1]);
}

// callback function for findPlaceFromQuery
function callback(results,status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    resultsLatlng.push(results[0].geometry.location);
    console.log(resultsLatlng)
    }
  }

  // Function to access the directionsService API and display the route
function calcRoute(start,end) {
  var request = {
    origin: start,destination: end,travelMode: 'DRIVING'
  }
  directionsService.route(request,function(results,status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result)
      console.log(result)
    }
  })
  console.log(resultsLatlng)
}

有关代码,请参见https://jsfiddle.net/adam1lake/qjcou20h/。 只需将您的API密钥放在HTML底部的script标记中,它就可以工作。

如果您在jsfiddle上运行代码,则会出现错误,因为路线API并未接收Latlng对象作为其开始和结束位置的参数。请随时更正我在该jsfiddle上的任何其他代码:)

urboat20 回答:JavaScript异步帮助-Google Maps JavaScript API计算路线

这里的问题是处理回调,异步代码以及知道何时将返回数据。当您说calcRoute在返回Places对象之前正在执行时,您是正确的。 great resources有一些关于理解异步javascript进行阅读和研究的知识。

一种解决方法是更新回调函数,以检查resultsLatlng数组中存在多少个元素。如果它有两个元素(开始位置和结束位置),则根据结果计算路线。

// callback function for findPlaceFromQuery
function callback(results,status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    resultsLatlng.push(results[0].geometry.location);
    if (resultsLatlng.length == 2) { // New code
      calcRoute(resultsLatlng[0],resultsLatlng[1]);
    }
  }
}
本文链接:https://www.f2er.com/3165518.html

大家都在问