帶有多個標記和方向的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