Google Maps API 3路線 - 將行程持續時間和距離添加到infoWindow

我現在非常接近這一個，但不能完全得到我要找的結果。這是試圖拉一系列地理定位 - 連同標題和文本。然後將這些分配給在谷歌地圖上填充的標記。我的最終目標是獲得每個標記與「地圖中心」標記（如果您願意的話）之間的行進距離和持續時間，並在點擊單個標記時將其填充到infoWindow中。Google Maps API 3路線 - 將行程持續時間和距離添加到infoWindow

到目前爲止，我已經得到了這項工作的各個方面，除了獲得距離/持續時間以正確填充infoWindow。我可以使用innerHTML在'map-canvas'之外成功填充div。

如果我嘗試打印指定的變量或更改infoWindow內div的內容，該函數僅適用於第一次單擊事件。之後，infoWindow顯示空白。這裏是工作的腳本：

<head> 
    <meta charset="utf-8" /> 
    <title>Towns Hub</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <style> 
    .wrapper {position:relative;width:500px;height:300px;margin:30px auto;} 
    #map {width:500px;height:300px;} 
    .container{position:absolute;bottom:0;left:0;width:100%;z-index:999;} 
    .trav-det{border:1px solid #000;float:left;padding:7px;font-size:1.5em;background: rgba(255,255,255, .85);} 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="container"> 
      <div class='trav-det' id='distance_road'></div> 
      <div class='trav-det' id='duration'></div> 
     </div> 
     <div id="map"></div> 
    </div> 
    <script> 
     var map; 
     var arrMarkers = []; 
     var infowindow = new google.maps.InfoWindow(); 
     var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 

     function mapInit(){ 
      directionsDisplay = new google.maps.DirectionsRenderer({ 
       suppressMarkers: true, 
       preserveViewport:true 
      }); 
      var latlng = new google.maps.LatLng(45.18929617,-109.24727440); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map"),myOptions); 
      directionsDisplay.setMap(map); 
      var marker1 = new google.maps.Marker({ 
       position: new google.maps.LatLng(45.18929617,-109.24727440), 
       map: map, 
       title: 'Red Lodge, MT', 
       icon: 'http://mywebsite.com/images/orange-marker.png' 
      }); 
      $.getJSON("hub.txt", {}, function(data){ 
       $.each(data.places, function(i, item){ 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(item.lat, item.lng), 
         map: map, 
         title: item.title 
        }); 
        arrMarkers[i] = marker; 

        google.maps.event.addListener(marker, 'click', function() { 
         infowindow.setContent("<p><strong>" + item.title + "</strong><br>"+ item.description +"</p>"); 
         calcRoute(this.getPosition()); 
         infowindow.open(map, this); 
        }); 

        function calcRoute(drive_end) { 
         var start = new google.maps.LatLng(45.18929617,-109.24727440); 
         var end = drive_end; 
         var request = { 
          origin:start, 
          destination:end, 
          travelMode: google.maps.DirectionsTravelMode.DRIVING, 
          unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL 
         }; 
         directionsService.route(request, function(response, status) { 
          if (status == google.maps.DirectionsStatus.OK) { 
           directionsDisplay.setDirections(response); 
           distance = response.routes[0].legs[0].distance.text; 
           duration = response.routes[0].legs[0].duration.text; 
           document.getElementById("distance_road").innerHTML = distance; 
           document.getElementById("duration").innerHTML = duration; 

          } 
         }); 
        } 

       }); 
      }); 
     } 
     google.maps.event.addDomListener(window, 'load', mapInit); 

    </script>

文本文件：

{"places": [{ "title": "Cooke City, MT", "description": "TEXT", "lat": 45.02009497, "lng": -109.93234595 }, { "title": "Silver Gate, MT", "description": "TEXY", "lat": 45.00687965, "lng": -109.98979568 }, { "title": "Absarokee, MT", "description": "TEXT", "lat": 45.52004697, "lng": -109.44136186 }, { "title": "Billings, MT", "description": "TEXT", "lat": 45.78333000, "lng": -108.50000000 }, { "title": "Bridger, MT", "description": "TEXT", "lat": 45.28568200, "lng": -108.90821700 }, { "title": "Cody, WY", "description": "TEXT", "lat": 44.52313500, "lng": -109.07561100 }, { "title": "Columbus, MT", "description": "TEXT", "lat": 45.62617100, "lng": -109.25712600 }, { "title": "Gardiner, MT", "description": "TEXT", "lat": 45.03049875, "lng": -110.70471900 }, { "title": "Nye, MT", "description": "TEXT", "lat": 45.43584263, "lng": -109.80859757 }, { "title": "Joliet, MT", "description": "TEXT", "lat": 45.48287830, "lng": -108.97241592 }]}

有關填充在信息窗口的時間/距離任何想法？

幫助感謝！

感謝，

山姆

PS我爲醜陋的腳本道歉。我一邊學習，一邊欣賞使這個腳本更高效的任何想法！

來源

2010-09-22 abigwonderful

只注意到在Firefox（未Safari或鉻）這僅適用。不太清楚爲什麼。 – abigwonderful 2010-09-22 16:17:12

現在可以在所有瀏覽器中工作。 JSON文件中有一個額外的'，'用於爲循環投擲webkit。 – abigwonderful 2010-09-23 18:59:05

我可能是錯的，但是從看你的代碼：

<div class="wrapper"> 
    <div class="container"> 
     <div class='trav-det' id='distance_road'></div> 
     <div class='trav-det' id='duration'></div> 
    </div> 
</div>

你與距離/時間的DOM poulating的div。假設的信息是出現在確定的div ... 把它變成你就需要使用信息窗口：

infowindow.setContent(" distance: "+distance+"<br> duration: "+duration+" ")

來源

2010-11-16 14:17:37

Google Maps API 3路線 - 將行程持續時間和距離添加到infoWindow

回答

相關問題