在 Google Map v3 上显示多个航点

Question

推送多个 WayPoint 时地图不显示方向渲染。航点是按数组生成的。数组的每个索引都是一个中途停留。有人可以告诉我我哪里错了。这是我的部分代码

    var map;

    var data = new Array();

    var minZoomLevel =9;

    function load(){

        map = new google.maps.Map( document.getElementById('map_container'), 

       {
        'zoom':minZoomLevel, 

        'mapTypeId': google.maps.MapTypeId.ROADMAP, 

        'center': new google.maps.LatLng(-20.131758, 57.587188),

        'mapTypeControlOptions': 
 {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}

     })


//getDijstra's shortest path

downloadUrl("dijkstraAlgorithm.php", function(data) {

    var xml = data.responseXML;

    var city = xml.documentElement.getElementsByTagName("city");

    var len = city.length;

    var latLng = [];

    //loop into cities

    for (var i =0; i <len;i++){

         var  address = city[i].getAttribute("address");

         latLng.push(address);

 }

    displayOptimisedPath(latLng);

});

函数 displayOptimizedPath (ray){

//build the waypoints

//free api allows a max of 9 total stops including the start and end address

//premier allows a total of 25 stops.

var items = ray;

//alert(items);

var waypoints = [];

len = items.length-1;

for (var i = 0; i < len; i++) {

    var address = items[i];

    if (address !== "") {

        waypoints.push({

            location: address,

            stopover: true

        });
    }

}

var originAddress = items[0];

var destinationAddress = items[len];

//build directions request

directionService();

var request = {

        origin: originAddress,

        destination: destinationAddress,

        waypoints: waypoints,

        optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.

        travelMode: google.maps.DirectionsTravelMode.DRIVING

    };

//get the route from the directions service

directionsService.route(request, function (response, status) {

    if (status == google.maps.DirectionsStatus.OK) {

        directionDisplay.setDirections(response);

    }

    else {

    }

});

}//结束函数

函数方向服务(){

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

var renderOptions = { draggable: false };

var directionDisplay = new google.maps.DirectionsRenderer(renderOptions);

//set the directions display service to the map

directionDisplay.setMap(map);

//set the directions display panel

//panel is usually just and empty div.  

//This is where the turn by turn directions appear.

directionDisplay.setPanel(directionsPanel);

}

function downloadUrl(url, callback) {

 var request = window.ActiveXObject ?

     new ActiveXObject('Microsoft.XMLHTTP'):

     new XMLHttpRequest;

 request.onreadystatechange = function() {

    if (request.readyState == 4) {

      request.onreadystatechange = doNothing;

      callback(request, request.status);

    }

  };

  request.open('GET', url, true);

  request.send(null);
}

Answer 1

directionService() 的调用不会使 google.maps.DirectionsService 和 google.maps.DirectionsRenderer 的实例在 displayOptimisedPath() 中可访问，它们仅在 directionService() 中可用。

简化问题：

function b()
{
  var c='I am C';
}

function a()
{
  b();
  alert(typeof c);//will be undefined
}
a();