谷歌地图API - 添加多个目的地不起作用（谷歌方向）
问题描述：
我无法创建/复制谷歌地图方向功能。当我有一个From/To字段时，我能够正常工作，但只要尝试添加多个目的地，它就无法工作。我看过我们，但我没有得到任何真正的示例教程，显示如何完成。以下是我迄今为止所做的。但我很肯定这是非常糟糕的。任何例子都会很棒。谷歌地图API - 添加多个目的地不起作用（谷歌方向）
<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&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
}
});
答
我在搜索如何添加多个目的地到谷歌地图api，这出现在顶部的搜索结果，但它没有多大帮助。最后在google中找到答案doc，您可以以地址，纬度/经度坐标或地点ID的形式提供由管道符（|）分隔的一个或多个位置。例如，这个请求会给你从迈阿密到3个目的地的距离信息。
http://maps.googleapis.com/maps/api/distancematrix/json?destinations=Washington,DC|New+York,NY|Los+Angeles,CA&origins=Miami,FL&units=imperial
它会返回一个JSON这样的：
{
"destination_addresses" : [ "Washington, DC, USA", "New York, NY, USA", "Los Angeles, CA, USA" ],
"origin_addresses" : [ "Miami, FL, USA" ],
"rows" : [
{
"elements" : [
{
"distance" : {
"text" : "1,053 mi",
"value" : 1693921
},
"duration" : {
"text" : "14 hours 56 mins",
"value" : 53781
},
"status" : "OK"
},
{
"distance" : {
"text" : "1,277 mi",
"value" : 2054642
},
"duration" : {
"text" : "18 hours 24 mins",
"value" : 66219
},
"status" : "OK"
},
{
"distance" : {
"text" : "2,733 mi",
"value" : 4397976
},
"duration" : {
"text" : "1 day 14 hours",
"value" : 138230
},
"status" : "OK"
}
]
}
],
"status" : "OK"
}
谢谢。这适用于我！ – Rup