google-maps-api-3 - Google map V3 - map 可以，方向不行

Question

这是页面: my site 正如您所看到的， map 显示正常，居中并按我想要的方式缩放。问题是方向没有显示...

Google map 代码:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myLatlng = new google.maps.LatLng(37.651429,22.267043);    
var myOptions = {
  zoom:9,
  center: new google.maps.LatLng(37.722392,22.769925),
  mapTypeId: google.maps.MapTypeId.ROADMAP,

}
map = new google.maps.Map(document.getElementById("map1"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var request = {
    origin:"athens, greece", 
    destination:myLatlng,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
};
directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
  }
});
}

有什么建议吗？

Answer 1

您至少有两个问题:

1. 您有一个 calcRoute 函数来计算和显示路线，但您从未调用它(解决方案:调用它，可能在初始化函数的末尾)。

2. myLatLng 变量是初始化例程的本地变量，因此当 calcRoute 尝试访问它时不可用(解决方案:将其设为全局变量)。

    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var myLatlng = new google.maps.LatLng(37.651429,22.267043);    
   
    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var myOptions = {
        zoom:9,
        center: new google.maps.LatLng(37.722392,22.769925),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      }
      map = new google.maps.Map(document.getElementById("map1"), myOptions);
      directionsDisplay.setMap(map);
      calcRoute();
    }
   
    function calcRoute() {
      var request = {
        origin:"athens, greece", 
        destination:myLatlng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
    }