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