带有多个标记和方向的infoWindows问题在Google Maps API v3中显示变量

Question

我想如何显示距离和分钟如何在谷歌地图API V3两个标记之间，并利用这些信息来重写出现在默认的信息窗口的文本directionsService被解雇了，我觉得这是有问题的asyncronous 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>

请注意，如果您单击一个标记，然后单击另一个标记，则第二个标记将显示所需的结果，但该信息属于第一个标记...如何强制执行顺序以避免异步？

提前致谢...

Answer 1

您要在DirectionsService回调函数中打开可用数据的信息窗口。

（您可能还希望从路线服务中删除现有标记）

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));

更新了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>

带有多个标记和方向的infoWindows问题在Google Maps API v3中显示变量

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-17 22:18:33

带有多个标记和方向的infoWindows问题在Google Maps API v3中显示变量

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-17 22:18:33

解决方案1
1 已采纳 2015-08-17 22:18:33