0

ポイントAからポイントBへの道順を取得するためにGoogle Maps APIを学習しようとしています。チュートリアルのサンプル コードを単純に試してみると、Javascript コンソールに、理解できないコード セクションが表示され、「詳細については、利用規約を参照してください: http://www. google.com/help/terms_maps.html .". 以下は私のhtmlコードリストです：

<html>
  <head>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
    </script>
    <script type="text/javascript">
      var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        directionsDisplay.setMap(map);
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

      function calcRoute() {
        initialize()
        var start = "Sydney, NSW";
        var end = "Chatswood, NSW";
        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="calcRoute()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

地図はブラウザに表示されますが、ルート案内は表示されません。誰でもここで問題を見ることができますか? どんな助けでも大歓迎です。

4

1 に答える 1

4

問題は、次の 2 行の順序です。

    directionsDisplay.setMap(map);
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

それらを逆にすると、方向レンダラーのマップをnull（または未定義）に設定して、マップから方向を削除します。それらを次のように変更しました (そのため、マップはグローバル マップ変数に割り当てられます)。

    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    directionsDisplay.setMap(map);

実施例

コードスニペット：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  initialize()
  var start = "Sydney, NSW";
  var end = "Chatswood, NSW";
  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);
    }
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map_canvas {
    height: 650px;
  }
}
<script src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="calcRoute()">
  <div id="map_canvas" style="width:100%; height:100%"></div>

于 2012-12-10T16:56:06.907 に答える