在Google Maps API v3中显示多个标记和方向变量的infoWindows问题
Issue with infoWindows with multiple markers and directionsDisplay variables in Google Maps API v3
我试图显示谷歌地图API v3中两个标记之间的距离和分钟数,并使用这些信息来覆盖directionsService
被触发时出现的默认infoWindow文本,我认为calcRoute()
和infoWindows
存在异步问题。这是一个重现错误的示例代码。
<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>
请注意,如果单击一个标记,然后单击另一个标记,第二个标记将显示所需的结果,但该信息属于第一个标记…我如何强制执行的顺序,以避免异步?
您需要在DirectionsService回调函数中打开可用数据的信息窗口。
(您可能还想从方向服务中抑制现有标记)
InfoWindow单击listener:
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
calcRoute(locations[i][1], locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
更新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);
}
});
}
概念验证
代码片段:
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>
相关文章:
- 将函数的上下文应用于javascript变量
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- 将PHP变量传递给jQuery时遇到问题
- 如何通过ajax刷新JSF填充的javascript变量
- 参数变量出现ngTable指令问题
- 通过javascript重定向html传递php变量
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- ng映射方向备选方案
- 全局变量和全局对象的属性之间有什么区别吗
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 值对象在某个变量发生更改后发生更改
- Javascript变量赋值|
- AngularJS-在JSON选择器中使用变量名
- 用真或假初始化变量是否在 Javascript 中建立了内容的方向
- 将方向作为变量传递给 jquery 动画函数
- 语法:const {} = 变量名称,任何人都可以解释或指出我正确的方向
- 获取或填充自定义变量与谷歌地图方向的响应
- 在Google Maps API v3中显示多个标记和方向变量的infoWindows问题
- google映射api方向javascript变量