0

我正在尝试使用 Google Maps API，并且正在尝试做一个准系统方向应用程序。该表单调用 calcRoute() 函数，使用警报，我可以看到确实定义了正确的“开始”和“结束”变量。然而，页面只是重新加载，表单被清除并且地图没有改变。对于我的生活，我无法弄清楚出了什么问题。有没有人看到任何明显的东西/可能导致问题的原因？谢谢！

另外，显然我很讨厌 stackoverflow 降价，所以这里有一个 pastebin 链接：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>
4

1 回答 1

0

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

于 2012-08-08T06:26:46.167 回答