在Google Map v3上显示多个WayPoints

时间:2012-03-01 06:00:56

标签: javascript ajax google-maps-api-3

按下多个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);

});

function displayOptimisedPath(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 {

    }

});

} //结束函数

function directionService(){

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

1 个答案:

答案 0 :(得分: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();

简化问题:

{{1}}