0

我正在尝试学习 Google Maps API 以获取从 A 点到 B 点的路线。当我简单地尝试本教程中的示例代码时，我的 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

问题是这两行的顺序：

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

反转它们，它应该可以工作，将方向渲染器的地图设置为空（或未定义），从地图中删除方向。我将它们更改为（因此将地图分配给全局地图变量）：

    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 回答