JavaScript 异步帮助 - 用于计算方向的 Google Maps JavaScript API答案

【问题标题】：JavaScript async help - Google Maps JavaScript API to calculate directionsJavaScript 异步帮助 - 用于计算方向的 Google Maps JavaScript API
【发布时间】：2019-11-04 15:43:24
【问题描述】：

我对 JavaScript 相当陌生，所以这里是我的上下文问题的摘要。用户输入两个位置，originInput 和 destinationInput。 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,
      fields: ['name', '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 底部的脚本标记中，它就可以工作了。

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

【问题讨论】：

请不要只在 jsfiddle 上发布代码，还要在您的问题上添加最小示例作为代码块。（假设 jsfiddle 消失了，那么您的问题将不再可读。）您甚至可以在 stackoverflow 编辑器中创建一个 JavaScript 代码示例。
谢谢@k0pernikus 的建议，我已经添加了一些代码:)
您在 placeService 的回调有时间运行之前调用了 calcRoute 函数，只需做一个小测试。创建一个像计数器一样工作的全局变量，从 0 开始，在 placeService 的回调中递增计数器，并检查计数器是否为 2，如果我们确定我们在第二个回调中并且您拥有所有您需要的信息，只有在这里您才调用 calcRoute" 如果这有效，您就知道问题出在哪里，现在只是为您找到最佳解决方案

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

【解决方案1】：

这里的问题是处理回调、异步代码以及知道何时返回数据。当您说 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]);
    }
  }
}

【讨论】：