Google Maps API V3 - 更改旅行模式時，路線面板會變得混亂

我正在構建一個Google地圖應用程序，我需要爲多個出行選項提供路線，並在側面板中顯示路線。Google Maps API V3 - 更改旅行模式時，路線面板會變得混亂

但是當我選擇一個新的方向請求和傳遞的結果，當事情被搞砸這是面板，看到小提琴http://jsfiddle.net/PLrkp/4/
這裏是如何重現它首先使用公交作爲出行方式選擇方向，然後換自行車，你會看到奇怪的箱子在部分，在那裏你可以選擇其他路線

注：這隻有當「provideRouteAlternatives」的路線請求對象設置爲true發生，只有當有實際上是不止一條路線，（看起來這部分沒有完全更新）

這裏是我的代碼

<div class="mapsection" > 
     <form onsubmit="calcRoute();return false;"> 
      <select id="travelmode"> 
      <option value="DRIVING" selected="selected" data-shortMode="c">DRIVING</option> 
      <option value="TRANSIT" data-shortMode="r" selected>TRANSIT</option> 
      <option value="WALKING" data-shortMode="w">WALKING</option> 
      <option value="BICYCLING" data-shortMode="b">BICYCLING</option> 
      </select> 
      <input type="text" id="start" value="Washington"/> 
      <input type="text" id="end" value="New York"/> 
      <button type="submit">GET DIRECTIONS</button> 
     </form> 
     <div id="map_canvas" style="width:100%; height:550px;float:left;"></div> 
     <div id="directionsPanel" style="float:right;max-width:395px; overflow:scroll;height: 505px;overflow-x: hidden;"></div> 
</div> 
<script> 
    //define one global Object 
     var myMap = {} 
     //init 
     function initialize(){ 
     //set up map options 
     var mapOptions = { 
      center: new google.maps.LatLng(40.75377,-73.990531), 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 
     myMap.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     myMap.directionsService = new google.maps.DirectionsService(); 
     myMap.directionsDisplay = new google.maps.DirectionsRenderer(); 
     myMap.directionsDisplay.setMap(myMap.map); 
     myMap.directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
     }//end init 
     //directions 
     var calcRoute = function() { 
     var start = document.getElementById("start").value, 
     end = document.getElementById("end").value, 
     request = { 
      origin:start, 
      destination:end, 
      durationInTraffic :true, 
      transitOptions: { 
      departureTime: new Date() 
      }, 
      provideRouteAlternatives : true, 
      travelMode: document.getElementById("travelmode").value 
     }; 
     myMap.directionsService.route(request, function(result, status) { 
      if(status == google.maps.DirectionsStatus.OK) { 
      myMap.directionsDisplay.setDirections(result); 
      }else{ 
      alert("something went wrong!"); 
      } 
     }); 

     } 
     //script loader 
     var loadScript = function() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
     } 
     window.onload = loadScript; 
</script>

來源

2012-12-24 yoelp

這個問題已經固定，你可以看到它在小提琴的問題

來源

2013-02-27 23:05:05 yoelp

Google Maps API V3 - 更改旅行模式時，路線面板會變得混亂

回答

相關問題