API bản đồ của Google - thêm nhiều điểm đến không hoạt động (chỉ đường google)

Question

Tôi gặp sự cố khi tạo/sao chép chức năng chỉ đường của bản đồ google. Tôi có thể làm cho nó hoạt động tốt khi tôi có một trường From/To nhưng ngay sau khi tôi cố gắng thêm nhiều điểm đến nó không hoạt động. Tôi đã xem xét chúng tôi nhưng tôi không nhận được bất kỳ hướng dẫn ví dụ thực sự tốt cho thấy cách này được thực hiện. Dưới đây là những gì tôi đã làm cho đến nay. Nhưng tôi khá chắc chắn điều này được thực hiện thực sự tồi tệ. Bất kỳ ví dụ nào cũng tuyệt vời.

<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> 

Answer 1

Đây là cách tôi đã xử lý chỉ đường nhiều hướng.

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

Answer 2

Tôi đã tìm cách thêm nhiều điểm đến vào bản đồ google api, điều này xuất hiện trong kết quả tìm kiếm hàng đầu nhưng không giúp được nhiều. Cuối cùng tìm thấy câu trả lời trong google doc, Bạn có thể cung cấp một hoặc nhiều vị trí được phân tách bằng ký tự ống (|), dưới dạng địa chỉ, tọa độ vĩ độ/kinh độ hoặc ID địa điểm. Ví dụ: yêu cầu này sẽ cung cấp cho bạn thông tin khoảng cách từ Miami đến 3 điểm đến.

http://maps.googleapis.com/maps/api/distancematrix/json?destinations=Washington,DC|New+York,NY|Los+Angeles,CA&origins=Miami,FL&units=imperial 

Nó sẽ trả về một json như thế này:

{ 
    "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" 
}