我在创建/复制谷歌地图方向功能时遇到问题。当我有一个 From/To 字段时，我能够让它正常工作，但是当我尝试添加多个目的地时，它就不起作用了。我看过我们，但我没有得到任何很好的示例教程来说明这是如何完成的。以下是我到目前为止所做的。但我很确定这样做真的很糟糕。任何例子都会很棒。

<linkhref=http://code.google.com/apis/maps/documentation/javascript/examples/default.css"   rel="stylesheet" type="text/css" />

<script src=http://maps.google.com/maps/api/js?sensor=false&amp;key=xxxxx" type="text/javascript"></script>
<script type="text/javascript">
var intTextBox = 0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
intTextBox = intTextBox + 1;

var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute(

'id', 'strText' + intTextBox);
newTBDiv.innerHTML =

"Text " + intTextBox + ": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);

}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
if (intTextBox != 0) {
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById(

'strText' + intTextBox));
intTextBox = intTextBox - 1;

}

}

var address = '<%= hdnDefault.Value %>'; //Hidden field contains default city London
var rendererOptions = {
draggable:

true
};

var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); ;
var directionsService = new google.maps.DirectionsService();
var map;
var mygc = new google.maps.Geocoder();
mygc.geocode({

'address': address },
function(results, status) {
var country1 = results[0].geometry.location.lat();
var country2 = results[0].geometry.location.lng();
var australia = new google.maps.LatLng(country1, country2);
initialize(australia);

}

);

function initialize(australia) {
var myOptions =
{

zoom: 7,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: australia

};

map =

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

directionsDisplay.setPanel(document.getElementById(

"directionsPanel"));
 google.maps.event.addListener(directionsDisplay,

'directions_changed', function() {
 computeTotalDistance(directionsDisplay.directions);

});

calcRoute();

}

function calcRoute(fromAddress, toAddress) {/*from and to text boxes*/
var request = {
origin: fromAddress,

destination: toAddress,

travelMode: google.maps.DirectionsTravelMode.DRIVING

};

directionsService.route(request,

function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);

}

});

}

function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;

}

}

function setDirections(fromAddress, toAddress) {
calcRoute(fromAddress, toAddress);

}

function showLocation() {
geocoder.getLocations(document.forms[0].fromAddress.value,

function(response) {
if (!response || response.Status.code != 200) {
alert(

"Sorry, we were unable to geocode the first address");
}

else {
location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

geocoder.getLocations(document.forms[0].toAddress.value,

function(response) {
if (!response || response.Status.code != 200) {
alert(

"Sorry, we were unable to geocode the second address");
}

else {
location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

gDir.load(

'from: ' + location1.address + ' to: ' + location2.address);
}

});

}

});

}

</script>


<

body onload="initialize()">
<div>
<div id="map_canvas" style="width: 430px; height: 450px; margin-right: 10px;">
</div>
</div>
</div>

/*Contains texboxes and buttons*/

</div>


<div id="directionsPanel" style="text-align: right; width: 900px; height: 100%;">
<p>
Total Distance:

<span id="total"></span>
</p>
</div>
</

body>

最佳答案

这就是我处理多个路径点方向的方式。

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

var renderOptions = { draggable: true };
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); 

//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 = ["address 1", "address 2", "address 3"];
var waypoints = [];
for (var i = 0; i < items.length; i++) {
    var address = items[i];
    if (address !== "") {
        waypoints.push({
            location: address,
            stopover: true
        });
    }
}

//set the starting address and destination address
var originAddress = "starting address";
var destinationAddress = "destination address";

//build directions request
var request = {
            origin: originAddress,
            destination: destinationAddress,
            waypoints: waypoints, //an array of 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 {
        //handle error
    }
});

关于javascript - 谷歌地图 API - 添加多个目的地不起作用(谷歌方向)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7320701/