JavaScript 异步帮助 - Google 地图 JavaScript API 计算方向
JavaScript async help - Google Maps JavaScript API to calculate directions
我是 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 上的任何其他代码:)
这里的问题是处理回调,异步代码,以及知道什么时候返回数据。当您说 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]);
}
}
}
我是 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 上的任何其他代码:)
这里的问题是处理回调,异步代码,以及知道什么时候返回数据。当您说 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]);
}
}
}