2012-08-08 56 views
0

我正在試用Google Maps API,並試圖做一個準系統路線應用。表單調用calcRoute()函數,使用警報,我可以看到確實有有正確的'start'和'end'變量定義。但是,頁面只需重新加載,表格已清除並且地圖不變。對於我的生活,我無法弄清楚什麼是錯的。有人看到任何明顯/可能導致問題的東西嗎?謝謝!有人可以告訴我如何調試這個HTML表單/ JavaScript組合?

而且,顯然我吸在計算器降價,所以這裏的一個引擎收錄鏈接:http://pastebin.com/BMThntPz

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Google Maps script --> 
    <script type="text/javascript" <google maps api> </script> 
    <script type="text/javascript"> 
     var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var philadelphia = new google.maps.LatLng(39.9522, -75.1642); 
     var mapOptions = { 
      center: philadelphia, 
      zoom: 7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true, 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
     } 

     function calcRoute() { 
     var start = document.getElementById('start').value;  
     var end = document.getElementById('end').value; 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING, 
     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      } 
     }); 
     } 
    </script> 
    </head> 

    <body onload="initialize()"> 
    <div class="container" style="height: 100%"> 
     <div> 
     <form class="form-horizontal" onsubmit="return calcRoute()"> 
      <input type="text" class="input-xlarge" id="start"> 
      <input type="text" class="input-xlarge" id="end"> 
     <input class="btn" type="submit" value="Let's go!"> 
     </form> <!-- /trip info --> 
    </div> 

    <div> 
     <div id="map_canvas" ></div> 
    </div> 

    </div> <!-- /container --> 
    </body> 
</html> 
+0

待辦事項您是否啓用了Firebug(Firefox)或Chrome開發者工具?如果你還沒有使用過這些工具,那麼學習它們是非常值得的(它們很容易學習)。 – 2012-08-08 03:51:09

回答

相關問題