谷歌地图JavaScript API V3-显示多条路线
我正在尝试使用谷歌地图API显示多条路线。 但是当尝试10条以上的路线时，我得到了一个超过查询限制的例外 使用google，我发现，我需要使用回调函数异步调用DirectionsDisplay（目前还无法实现）。我必须使用某种超时，因为每秒不能发出超过10个请求 这是我到目前为止得到的谷歌地图JavaScript API V3-显示多条路线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在尝试使用谷歌地图API显示多条路线。 但是当尝试10条以上的路线时，我得到了一个超过查询限制的例外 使用google，我发现，我需要使用回调函数异步调用DirectionsDisplay（目前还无法实现）。我必须使用某种超时，因为每秒不能发出超过10个请求 这是我到目前为止得到的 <!DOCTYPE html> <html> <head> <title>Display multiple routes</title>
<!DOCTYPE html>
<html>
<head>
<title>Display multiple routes</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=ENTER_API_KEY"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var addresses =
[
['243, Dornacherstrasse', '26, Mattenstrasse'],
['48 av general de gaulle, saint louis', 'Gründenstraße 40, Muttenz'],
['50 ackerstrasse , Basel', 'holeestrasse 133, Basel'],
['71 avenue de Bâle , Saint-Louis ', 'Leonhardstr 6, Basel'],
['Ackerstrasse 44, Basel', 'Petersplatz 1, Basel'],
['Ackerstrasse 51, Basel', 'Maiengasse 51, Basel '],
['Aeussere Baselstr. 255, Riehen', 'zu den drei Linden 80, Basel'],
['Aeussere Baselstrasse 309, Riehen', 'Gotthelfplatz 1, Basel'],
['Ahornstrasse 20, Basel', 'Viaduktstrasse , Basel'],
['Albert Schweitzer Strasse 10, Basel', 'Kohlenberg 17, Basel'],
['alemannengasse 17, Basel', 'Centrahlbahnplatz, Basel'],
['Alemannengasse 23, Basel', 'Peter Merian-Weg 8, Basel'],
['Allmendstrasse 233, Basel', 'Universitätsspital Basel, Basel '],
['Allmendstrasse 4, Basel', 'Petersplatz 1, Basel'],
['Allschwilerstrasse 106, Basel', 'Centralbahnstrasse 10 , Basel'],
['Allschwilerstrasse 116, Basel', 'Spitalstrasse 8, Architektur Institut, Basel '],
['Allschwilerstrasse 116, Basel', 'Steinenvorstadt 55, Kino Pathè Küchlin, Basel'],
['Allschwilerstrasse 48, Basel', 'Schneidergasse 28, Basel'],
['Altrheinweg 52, Basel', 'Vogesenplatz 1, Basel '],
['Am Rheinpark 6, Weil am Rhein', 'J. J. Balmer-Str. 3, Basel'],
['Am Weiher 15, Binningen', 'Klingelbergstrasse 82, Basel '],
['Amerbachstrasse, , Basel', 'Peter Merian-Weg, Basel'],
['Amerikanerstrasse 16, Binningen', 'Petersplatz 1, Basel'],
['Amselweg 20, Reinach', 'Baselstrasse 33, Münchenstein'],
['An der Auhalde 15, Riehen', 'Zu den Dreilinden 95, Basel'],
['arnikastr. 22, Riehen', 'marktplatz, Basel'],
['Auf der Lyss 14, Basel', 'Grenzstrasse 15, Basel']
];
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var basel = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: basel
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute(start, end) {
var request = {
origin: start,
destination: end,
travelMode: 'BICYCLING'
};
directionsService.route(request,
function(result, status) {
if (status == 'OK') {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressBicyclingLayer: true,
suppressMarkers: true
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
}
});
}
initialize();
addresses.forEach(function (v, i) {
setTimeout(calcRoute(addresses[i][0], addresses[i][1]), 100);
});
</script>
</body>
</html>
显示多条路线
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
变量地址=
[
['243，多纳切斯特拉斯'，'26，马特斯塔斯']，
[圣路易斯戴高乐将军大道48号'，'穆滕兹格伦德斯特拉街40号'，
['50阿克斯特拉斯，巴塞尔'，'holeestrasse 133，巴塞尔'，
['71 avenue de Bále，Saint Louis'，'Leonhardstr 6，Basel']，
['Ackerstrasse 44，Basel'，'Peters Platz 1，Basel']，
['Ackerstrasse 51，巴塞尔'，'Maiengasse 51，巴塞尔'，
['Aeussere Baselstr.255，Riehen'，'zu den drei Linden 80，Basel']，
['Aeussere Baselstrasse 309，Riehen'，'Gotthelfplatz 1，Basel']，
['Ahornstrase 20，Basel'，'Viaduktstrasse，Basel']，
['Albert Schweitzer Strasse 10，Basel'，'Kohlenberg 17，Basel']，
['alemannengasse 17，巴塞尔'，'Centrahlbahnplatz，巴塞尔'，
['Alemannengasse23，巴塞尔'，'Peter Merian Weg 8，巴塞尔'，
['Allmendstrasse233，Basel'，'Universitätspital Basel，Basel']，
['Allmendstrasse 4，Basel'，'Peters Platz 1，Basel']，
['Allschwilerstrasse 106，巴塞尔'，'Centralbahnstrasse 10，巴塞尔'，
['Allschwilerstrasse 116，Basel'，'Spitalstrasse 8，Architektur Institut，Basel']，
['Allschwilerstrasse 116，Basel'，'Steinenvorstad 55，Kino PathèKüchlin，Basel']，
['Allschwilerstrasse 48，巴塞尔'，'Schneidergasse 28，巴塞尔'，
[Altrheinweg 52，巴塞尔”，“Vogesenplatz 1，巴塞尔]，
['Am Rhein Park 6，Weil Am Rhein'，'J.J.Balmer-Str.3，Basel']，
['Am Weiher 15，Binningen'，'Klingelbergstrasse 82，Basel']，
['Amerbachstrasse，Basel'，'Peter Merian Weg，Basel']，
['Americanerstrasse 16，Binningen'，'Peters Platz 1，Basel']，
['Amselweg 20，Reinach'，'Baselstrasse 33，Münchenstein']，
['An der Auhalde 15，Riehen'，'Zu den Dreilinden 95，Basel']，
['arnikastr.22，Riehen'，'marktplatz，Basel']，
['Auf der Lyss 14，巴塞尔'，'Grenzstrasse 15，巴塞尔']
];
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var basel=新的google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：7，
中心：巴塞尔
}
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
方向显示.setMap（地图）；
}
函数计算（开始、结束）{
var请求={
来源：start，
目的地:完，
travelMode:“骑自行车”
};
directionsService.route（请求，
功能（结果、状态）{
如果（状态=‘正常’）{
directionsDisplay=新建google.maps.DirectionsRenderer({
suppressBicyclingLayer：对，
真的吗
});
方向显示.setMap（地图）；
方向显示。设置方向（结果）；
}
});
}
初始化（）；
地址。forEach（函数（v，i）{
setTimeout（calcRoute（地址[i][0]，地址[i][1]），100）；
});
我知道在这方面有很多类似的问题。但是它们都不适合我。使用相关答案中的修改代码，通过检测超查询限制状态并增加请求之间的延迟，解决了Google Maps Javascript API v3地理编码器的相同问题
// delay between directions requests
var delay = 100;
function calcRoute(start, end, next) {
console.log("calcRoute('" + start + "','" + end + "',next)");
var request = {
origin: start,
destination: end,
travelMode: 'BICYCLING'
};
directionsService.route(request,
function(result, status) {
if (status == 'OK') {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressBicyclingLayer: true,
suppressMarkers: true,
preserveViewport: true // don't zoom to fit the route
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
// combine the bounds of the responses
bounds.union(result.routes[0].bounds);
// zoom and center the map to show all the routes
map.fitBounds(bounds);
}
// ====== Decode the error status ======
else {
console.log("status=" + status + " (start=" + start + ", end=" + end + ")");
// === if we were sending the requests to fast, try this one again and increase the delay
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay += 100;
document.getElementById('delay').innerHTML = delay;
} else {
var reason = "Code " + status;
var msg = 'start="' + start + ' end="' + end + '"" error=' + reason + '(delay=' + delay + 'ms)<br>';
document.getElementById("messages").innerHTML += msg;
}
}
next();
});
}
一个问题实际上应该包含一个问题。在哪一个类似的问题中，您看到它是这样实现的？