0

私は Google Maps 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>
4

1 に答える 1

0

Chrome デベロッパー ツールを使用して Maps API をデバッグする方法を示す素晴らしいスクリーンキャストがあります: http://www.youtube.com/watch?v=nb4gvrNrDWw&feature=player_embedded

于 2012-08-08T06:26:46.167 に答える