带有多个标记和方向的infoWindows问题在Google Maps API v3中显示变量
[英]Issue with infoWindows with multiple markers and directionsDisplay variables in Google Maps API v3
问题描述
I'm trying to display how distance and how minutes are between two markers in Google Maps API v3 and use these information to override the default infoWindow text that appears when the directionsService is fired, I think there is a asyncronous problem with calcRoute() and the infoWindows . 
我想如何显示距离和分钟如何在谷歌地图API V3两个标记之间，并利用这些信息来重写出现在默认的信息窗口的文本directionsService被解雇了，我觉得这是有问题的asyncronous calcRoute()和infoWindows 。 This is an example code that reproduces the error. 这是重现该错误的示例代码。
<html>
<head>
<meta charset='utf-8'>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script>
var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map });
var directionsService = new google.maps.DirectionsService();
var map;
function initMap(locations){
function calcRoute(latdest, lngdest) {
var start = new google.maps.LatLng(-23.571064, -46.645424);
var end = new google.maps.LatLng(latdest, lngdest)
var request = {origin:start,destination:end,travelMode: google.maps.TravelMode.DRIVING};
directionsService.route(request, function(result, status){
if (status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(result);
}
});
}
map = new google.maps.Map(document.getElementById('mapcanvas'), {zoom: 10,center: new google.maps.LatLng(-23.571064, -46.645424),mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var image = null;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
calcRoute(locations[i][1], locations[i][2]);
infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text+" - "+directionsDisplay.directions.routes[0].legs[0].duration.text);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
</head>
<body onload='initMap([["Vila Noemia", -23.670237, -46.467286],["Osasco", -23.535465, -46.794234],["Guarulhos", -23.458911, -46.526912]]);'>
<div id="mapcanvas" style="width:100%;height:100%;">
</div>
</body>
Please note that if you click one marker, and then another, the second marker will show the desired result but that information belongs to the first marker... How can I force the order of execution to avoid the async? 请注意，如果您单击一个标记，然后单击另一个标记，则第二个标记将显示所需的结果，但该信息属于第一个标记...如何强制执行顺序以避免异步？
Thanks in advance... 提前致谢...
1 个解决方案
解决方案1
1 已采纳 2015-08-17 22:18:33
You want to open the infowindow in the DirectionsService callback function where the data is available. 您要在DirectionsService回调函数中打开可用数据的信息窗口。
(you may also want to suppress the existing markers from the directions service) （您可能还希望从路线服务中删除现有标记）
InfoWindow click listener: InfoWindow单击侦听器：
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
calcRoute(locations[i][1], locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
Updated calcRoute function: 更新了calcRoute函数：
function calcRoute(latdest, lngdest) {
var start = new google.maps.LatLng(-23.571064, -46.645424);
var end = new google.maps.LatLng(latdest, lngdest)
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text + " - " + directionsDisplay.directions.routes[0].legs[0].duration.text);
}
});
}
code snippet: 代码段：
var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, suppressMarkers: true }); var directionsService = new google.maps.DirectionsService(); var map; var infowindow = new google.maps.InfoWindow(); function initMap(locations) { function calcRoute(latdest, lngdest) { var start = new google.maps.LatLng(-23.571064, -46.645424); var end = new google.maps.LatLng(latdest, lngdest) var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text + " - " + directionsDisplay.directions.routes[0].legs[0].duration.text); } }); } map = new google.maps.Map(document.getElementById('mapcanvas'), { zoom: 10, center: new google.maps.LatLng(-23.571064, -46.645424), mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); var marker, i; var image = null; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { calcRoute(locations[i][1], locations[i][2]); infowindow.open(map, marker); } })(marker, i)); } } google.maps.event.addDomListener(window, 'load', function() { initMap([ ["Vila Noemia", -23.670237, -46.467286], ["Osasco", -23.535465, -46.794234], ["Guarulhos", -23.458911, -46.526912] ]); });
html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="mapcanvas" style="width:100%;height:100%;"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.