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