API карт Google - добавление нескольких пунктов назначения не работает (направления Google)

У меня возникли проблемы с созданием/воспроизведением функции маршрутов Google Maps. Я могу заставить его работать нормально, когда у меня есть поле «От/Кому», но как только я пытаюсь добавить несколько пунктов назначения, он не работает. Я посмотрел на мы, но я не получаю действительно хороших примеров учебников, показывающих, как это делается. Ниже то, что я сделал до сих пор. Но я почти уверен, что это сделано очень плохо. Любые примеры были бы замечательными.

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

google-maps javascript google-maps-api-3
person Rup    schedule 06.09.2011    source источник

Ответы (2)


arrow_upward
21
arrow_downward

Вот как я обрабатывал направления с несколькими точками пути.

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
    }
});
person Bryan Weaver    schedule 06.09.2011

arrow_upward
5
arrow_downward

Я искал, как добавить несколько пунктов назначения в API карт Google, это появилось в первых результатах поиска, но мало чем помогло. Наконец-то нашел ответ в doc Google, Вы можете предоставить один или несколько местоположений, разделенных вертикальной чертой (|), в виде адреса, координат широты/долготы или идентификатора места. Например, этот запрос предоставит вам информацию о расстоянии от Майами до 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"
}
person s-hunter    schedule 11.04.2017