google-maps-api-3 - Google Maps V3 - 地图OK，方向不正确

Question

这是页面： 我的站点 如您所见，地图显示正常、居中并按我想要的方式缩放。问题是方向没有显示...

谷歌地图代码：

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);
        }
      });
    }