有人可以告诉我如何调试这个 html 表单/javascript 组合

Can someone show me how I can debug this html form/javascript combination?

本文关键字：html 表单 组合 javascript 调试 告诉我 何调试      更新时间：2023-09-26

我正在试验谷歌地图API，并试图做一个准系统方向应用程序。该表单调用 calcRoute（） 函数，使用警报，我可以看到它确实定义了正确的"开始"和"结束"变量。但是，只需在清除表单且地图不变的情况下重新加载页面。对于我的生活，我无法弄清楚出了什么问题。有没有人看到任何明显的东西/可能导致问题的原因？谢谢！

另外，显然我吮吸堆栈溢出降价，所以这里有一个粘贴链接：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>

有一个很棒的截屏视频，展示了如何使用Chrome开发者工具调试Maps API：http://www.youtube.com/watch?v=nb4gvrNrDWw&feature=player_embedded

相关文章：