Specificare il percorso esatto intrapreso in Google Maps

È possibile mostrare un percorso esatto preso nell'API di Google Maps?Specificare il percorso esatto intrapreso in Google Maps

Fondamentalmente ho una lista di coordinate lat e long (oltre 100 punti) che voglio usare per visualizzare il viaggio compiuto da qualcuno che usa le indicazioni stradali API in Google Maps.

Per esempio, se io uso l'inizio e la fine coordinate per disegnare in questo modo:

var icon1 = 'traffic-green.png'; 
var icon2 = 'traffic-red.png'; 

function initMap() 
{ 
    var pointA = new google.maps.LatLng(51.7519, -1.2578), 
     pointB = new google.maps.LatLng(50.8429, -0.1313), 
     myOptions = { 
      zoom: 7, 
      center: pointA, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true 
     }, 

     map = new google.maps.Map(document.getElementById('map'), myOptions), 

     directionsService = new google.maps.DirectionsService, 
     directionsDisplay = new google.maps.DirectionsRenderer({ 
      map: map, 
      suppressMarkers: true, 
      polylineOptions: { 
       strokeWeight: 4, 
       strokeOpacity: 1, 
       strokeColor: '#ff0000' 
      } 
     }), 
     markerA = new google.maps.Marker({ 
      position: pointA, 
      icon: icon1, 
      map: map 
     }), 
     markerB = new google.maps.Marker({ 
      position: pointB, 
      icon: icon2, 
      map: map 
     }); 

    // get route from A to B 
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 

} 

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) 
{ 
    directionsService.route({ 
     origin: pointA, 
     destination: pointB, 
     avoidTolls: true, 
     avoidHighways: false, 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } else { 
      window.alert('Directions request failed due to ' + status); 
     } 
    }); 
} 

initMap();

Il problema con specificando solo solo l'inizio e di fine le coordinate, il percorso visualizzato è il percorso più breve in base a Google Maps e non necessariamente il percorso effettivo preso in quanto non sa a quali altre coordinate sono state spostate durante il viaggio. Per esempio. una persona potrebbe utilizzare strade secondarie, deviare altrove, lungo la strada, ecc.

Ho esaminato l'utilizzo della parte Waypoint dell'API https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints ma a quanto pare è limitato a soli 10 punti, quindi non è proprio così taglia ...

C'è un altro modo per passare più coordinate che possono quindi mappare il viaggio sulla mappa? Sto cercando di mostrare un percorso compiuto da una persona (simile a quello che potresti vedere su qualcosa come Strava).

fonte

2016-04-22 Cameron

Una possibilità potrebbe essere il [Roads API] (https://developers.google.com/maps/documentation/roads/intro), ** ** ma mentre questo suona come esso fa quello che vuoi, 1. Non sono sicuro che sia pronto per il prime time (vedi la lista dei problemi, non sceglie sempre le strade corrette), 2. ha una dimensione di query limitata di 100 punti e una quota, e 3. una separazione minima di 400 m sui punti di ingresso. – geocodezip

Ecco un rapido esempio su come superare la limitazione dei 10 waypoint. L'ho provato con 15 waypoint, ma non ho inserito alcun errore nel trapping.

Se si cerca qui per "waypoint multipli" si otterranno molti esempi, quindi è possibile scegliere quello, quello che si adatta meglio al vostro compito.

godere, Reinhard

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title> Multiple Waypoints </title> 
 
<style type="text/css"> #map-canvas { height: 500px }; </style> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.22"></script> 
 
<script type="text/javascript"> 
 

 
var map = null; 
 
var directionsService = null; 
 

 
function init() { 
 
\t var mapOptions = { 
 
\t \t center: new google.maps.LatLng(51.429772, 6.83753), 
 
\t \t zoom: 13, 
 
\t }; 
 
\t map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
\t info = document.getElementById('info'); 
 
\t pointsToPath(); 
 
} 
 

 
var path = []; 
 
function pointsToPath() { 
 
\t var sArray = [ 
 
\t "51.432929,6.806288", 
 
\t "51.432608,6.823883", 
 
\t "51.430039,6.826715", 
 
\t "51.418372,6.82354", 
 
\t "51.41607,6.827402", 
 
\t "51.418158,6.833668", 
 
\t "51.422065,6.839762", 
 
\t "51.420406,6.846113", 
 
\t "51.418693,6.855812", 
 
\t "51.425384,6.85401", 
 
\t "51.431431,6.856413", 
 
\t "51.435283,6.853495", 
 
\t "51.434909,6.838045", 
 
\t "51.434534,6.83135", 
 
\t "51.435604,6.824312" 
 
\t ]; 
 

 
\t for (var i=0; i < sArray.length; i++) { 
 
\t \t s = sArray[i].split(","); 
 
\t \t point = new google.maps.LatLng(s[0],s[1]); 
 
\t \t path.push(point); 
 
\t } 
 
\t batchJobs(); 
 
} 
 

 
var batch = []; 
 
var items = 8; 
 
function batchJobs() { 
 

 
\t for (var i=0; i < path.length; i++) { 
 
\t \t batch.push(path[i]); 
 
\t \t if (i == items || i == path.length - 1) { 
 
\t \t \t calcRoute(); 
 
\t \t \t batch = [path[i]]; 
 
\t \t \t items += items 
 
\t \t } 
 
\t } 
 
} 
 

 

 
function calcRoute() { 
 

 
\t rStart = batch[0]; 
 
\t rEnd = batch[batch.length - 1]; 
 

 
\t waypoints = []; 
 
\t for (var i = 1; i < batch.length - 2; i++) { 
 
\t \t waypoints.push({ 
 
     location: batch[i], 
 
     stopover: true 
 
     }); 
 
    } 
 

 
    var request = { 
 
\t \t origin: rStart, 
 
\t \t destination: rEnd, 
 
\t \t waypoints: waypoints, 
 
\t \t travelMode: google.maps.TravelMode.DRIVING 
 
\t }; 
 

 
\t directionsService = new google.maps.DirectionsService; 
 
\t poly = new google.maps.Polyline({ map: map }); 
 
\t line = []; 
 

 
\t directionsService.route(request, function(result, status) { 
 
\t \t if (status == google.maps.DirectionsStatus.OK) { 
 
\t \t \t for(var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
 
\t \t \t  line.push(result.routes[0].overview_path[i]); 
 
\t \t \t } 
 
\t \t \t poly.setPath(line); 
 
\t \t } else { 
 
\t \t \t alert('Directions request failed due to ' + status); 
 
\t \t } 
 
\t }); 
 
} //calcRoute() 
 

 

 
google.maps.event.addDomListener(window, 'load', init); 
 
</script> 
 
</head> 
 
    <body> 
 
\t <div id="map-canvas"></div> 
 
\t <div id="info" >0/0</div> 
 
    </body> 
 
</html>

fonte

2016-04-28 18:00:23 ReFran

lascio questo esempio, che ha messo due percorsi, entrambi vanno la stessa origine per la stessa destinazione, diversi percorsi I punti di cattura con Windows Mobile applicazione, non sono molto precisi ma fanno il percorso. Lasciare l'esempio qui sotto. Utilizzare più di 10 punti al percorso

lascio il link della pagina in cui pubblichiamo: Ruta

Qui dichiarare la varible con la mappa dati:

function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(8.984444597839236,-79.56762313842773), 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions);  

});

Qui ci sono le variabili contenente i due percorsi, nuovi google.maps.LatLng uso, per contenere le due cordenadas, è più facile

var ruta = [ 
    new google.maps.LatLng(8.999789020639756, -79.58511114120483), 
    new google.maps.LatLng(8.999587682286911, -79.5849609375), 
    new google.maps.LatLng(8.999158513318694, -79.58561539649963), 
    new google.maps.LatLng(8.997245791109552, -79.58420991897583), 
    new google.maps.LatLng(8.995311865023645, -79.582799077034), 
    new google.maps.LatLng(8.993081214157364, -79.58127021789551), 
    new google.maps.LatLng(8.990983012199813, -79.5797735452652), 
    new google.maps.LatLng(8.989976294823254, -79.57899034023285), 
    new google.maps.LatLng(8.988996067320308, -79.57812130451202), 
    new google.maps.LatLng(8.987703222665113, -79.57686603069305), 
    new google.maps.LatLng(8.98634149195293, -79.57553565502167), 
    new google.maps.LatLng(8.985234088495204, -79.57438230514526), 
    new google.maps.LatLng(8.984222056538217, -79.57348108291626), 
    new google.maps.LatLng(8.98297158382934, -79.5723170042038), 
    new google.maps.LatLng(8.981986038739084, -79.57152307033539), 
    new google.maps.LatLng(8.980883920625757, -79.57071840763092), 
    new google.maps.LatLng(8.979861279187308, -79.57006394863129), 
    new google.maps.LatLng(8.97861079143597, -79.5688247680664), 
    new google.maps.LatLng(8.978192194996502, -79.56818640232086), 
    new google.maps.LatLng(8.977847779842211, -79.56755876541138), 
    new google.maps.LatLng(8.977588143586605, -79.56701695919037), 
    new google.maps.LatLng(8.977360299372414, -79.56672191619873), 
    new google.maps.LatLng(8.977095364059663, -79.56650733947754), 
    new google.maps.LatLng(8.97683042855338, -79.56637859344482), 
    new google.maps.LatLng(8.976501908256823, -79.56630885601044), 
    new google.maps.LatLng(8.974541377720467, -79.5661050081253), 
    new google.maps.LatLng(8.974090984073609, -79.56602990627289), 
    new google.maps.LatLng(8.973905527703572, -79.56594407558441), 
    new google.maps.LatLng(8.973624693591338, -79.5658153295517), 
    new google.maps.LatLng(8.973116, -79.56553101539612), 
    new google.maps.LatLng(8.972904061667313, -79.56541299819946), 
    new google.maps.LatLng(8.9725914341375, -79.56521987915039), 
    new google.maps.LatLng(8.972326495342093, -79.56502139568329), 
    new google.maps.LatLng(8.972024464879365, -79.5647531747818), 
    new google.maps.LatLng(8.971748928097616, -79.56448495388031), 
    new google.maps.LatLng(8.971494586267248, -79.56423282623291), 
    new google.maps.LatLng(8.971245543052296, -79.56403434276581), 
    new google.maps.LatLng(8.970943511689955, -79.56373929977417), 
    new google.maps.LatLng(8.96926908764863, -79.56239819526672), 
    new google.maps.LatLng(8.967440989290688, -79.56092298030853), 
    new google.maps.LatLng(8.96551750195085, -79.55935657024384), 
    new google.maps.LatLng(8.964823348370494, -79.55875039100647), 
    new google.maps.LatLng(8.96348802630202, -79.55767750740051), 
    new google.maps.LatLng(8.96314359719433, -79.55732345581055), 
    new google.maps.LatLng(8.96295283631723, -79.55702304840088), 
    new google.maps.LatLng(8.9627779720919, -79.55667436122894), 
    new google.maps.LatLng(8.96266669481377, -79.55637395381927), 
    new google.maps.LatLng(8.96260840670209, -79.55606818199158), 
    new google.maps.LatLng(8.96260840670209, -79.55571413040161), 
    new google.maps.LatLng(8.962703787243596, -79.55539762973785), 
    new google.maps.LatLng(8.96278856992612, -79.55516695976257), 
    new google.maps.LatLng(8.963021722201072, -79.5548290014267), 
    new google.maps.LatLng(8.96341914050661, -79.55448031425476), 
    new google.maps.LatLng(8.963742373741155, -79.55430865287781), 
    new google.maps.LatLng(8.964176883537672, -79.55424964427948), 
    new google.maps.LatLng(8.964553105014769, -79.55424427986145), 
    new google.maps.LatLng(8.964839245032223, -79.55426037311554), 
    new google.maps.LatLng(8.965321443440464, -79.55424964427948), 
    new google.maps.LatLng(8.96566057160784, -79.55429792404175), 
    new google.maps.LatLng(8.966768034823673, -79.55458760261536), 
    new google.maps.LatLng(8.96711775934803, -79.55448031425476), 
    new google.maps.LatLng(8.967493977778423, -79.55421209335327), 
    new google.maps.LatLng(8.967854299289968, -79.55390095710754), 
    new google.maps.LatLng(8.96852725174363, -79.55327868461609), 
    new google.maps.LatLng(8.969300880582104, -79.55253839492798), 
    new google.maps.LatLng(8.970201679206925, -79.55190539360046), 
    new google.maps.LatLng(8.970975304476767, -79.55148696899414), 
    new google.maps.LatLng(8.971801915956505, -79.55163717269897), 
    new google.maps.LatLng(8.972395379447507, -79.55193758010864), 
    new google.maps.LatLng(8.972798086263662, -79.55204486846924), 
    new google.maps.LatLng(8.973592901036632, -79.55195903778076), 
    new google.maps.LatLng(8.974536078974927, -79.55180883407593) 
];

Ruta 2

var ruta2 = [ 
    new google.maps.LatLng(8.97488579601432, -79.55183029174805), 
    new google.maps.LatLng(8.97575478841011, -79.55163717269897), 
    new google.maps.LatLng(8.976178686384351, -79.55120801925659), 
    new google.maps.LatLng(8.976369440311124, -79.55056428909302), 
    new google.maps.LatLng(8.976496609539934, -79.55007076263428), 
    new google.maps.LatLng(8.975055355669639, -79.54981327056885), 
    new google.maps.LatLng(8.97456787144699, -79.54974889755249), 
    new google.maps.LatLng(8.974165166595082, -79.5498776435852), 
    new google.maps.LatLng(8.973762461296193, -79.55011367797852), 
    new google.maps.LatLng(8.973274975336363, -79.55034971237183), 
    new google.maps.LatLng(8.97278748872158, -79.55049991607666), 
    new google.maps.LatLng(8.971091878004616, -79.55114364624023), 
    new google.maps.LatLng(8.970159288733521, -79.55150842666626), 
    new google.maps.LatLng(8.969417454647722, -79.55198049545288), 
    new google.maps.LatLng(8.968823986287543, -79.55258131027222), 
    new google.maps.LatLng(8.967509874323248, -79.55376148223877), 
    new google.maps.LatLng(8.967234334114616, -79.55395460128784), 
    new google.maps.LatLng(8.966895207416961, -79.55425500869751), 
    new google.maps.LatLng(8.966492494052108, -79.55444812774658), 
    new google.maps.LatLng(8.966132171189194, -79.5544695854187), 
    new google.maps.LatLng(8.965114787058173, -79.55438375473022), 
    new google.maps.LatLng(8.96458489836118, -79.55451250076294), 
    new google.maps.LatLng(8.96422457360562, -79.5545768737793), 
    new google.maps.LatLng(8.964076204484742, -79.55479145050049), 
    new google.maps.LatLng(8.963927835303258, -79.55507040023804), 
    new google.maps.LatLng(8.963758270450187, -79.55543518066406), 
    new google.maps.LatLng(8.963864248492628, -79.55584287643433), 
    new google.maps.LatLng(8.964055008891094, -79.5563793182373), 
    new google.maps.LatLng(8.964351747089578, -79.55698013305664), 
    new google.maps.LatLng(8.964627289485389, -79.55773115158081), 
    new google.maps.LatLng(8.965241960230426, -79.55901861190796), 
    new google.maps.LatLng(8.966238148538938, -79.55983400344849), 
    new google.maps.LatLng(8.968082149473005, -79.56129312515259), 
    new google.maps.LatLng(8.974440701542045, -79.55876111984253), 
    new google.maps.LatLng(8.976348245435327, -79.55835342407227), 
    new google.maps.LatLng(8.977831883750271, -79.55813884735107), 
    new google.maps.LatLng(8.978446532131251, -79.55888986587524), 
    new google.maps.LatLng(8.979294321292047, -79.5591688156128), 
    new google.maps.LatLng(8.980078524501028, -79.5590615272522), 
    new google.maps.LatLng(8.980650779826286, -79.55858945846558), 
    new google.maps.LatLng(8.981307812604333, -79.55798864364624), 
    new google.maps.LatLng(8.981986038739084, -79.55777406692505), 
    new google.maps.LatLng(8.982918597602332, -79.55792427062988), 
    new google.maps.LatLng(8.983596820723086, -79.55813884735107), 
    new google.maps.LatLng(8.984126681653088, -79.55818176269531), 
    new google.maps.LatLng(8.98493206878298, -79.55809593200684), 
    new google.maps.LatLng(8.985483122103634, -79.5576024055481), 
    new google.maps.LatLng(8.985864620065477, -79.55691576004028), 
    new google.maps.LatLng(8.98628850621864, -79.55633640289307), 
    new google.maps.LatLng(8.986818363212704, -79.55607891082764), 
    new google.maps.LatLng(8.987305830962828, -79.5559287071228), 
    new google.maps.LatLng(8.988895395156268, -79.55601453781128), 
    new google.maps.LatLng(8.989637189392646, -79.5555853843689), 
    new google.maps.LatLng(8.990209429622622, -79.55507040023804), 
    new google.maps.LatLng(8.991057191264215, -79.55404043197632), 
    new google.maps.LatLng(8.991184355339279, -79.55358982086182), 
    new google.maps.LatLng(8.991057191264215, -79.55331087112427), 
    new google.maps.LatLng(8.99099360920994, -79.55294609069824), 
    new google.maps.LatLng(8.99126913136451, -79.55283880233765), 
    new google.maps.LatLng(8.99173539914851, -79.55298900604248), 
    new google.maps.LatLng(8.991565847296528, -79.55326795578003), 
    new google.maps.LatLng(8.991629429250322, -79.55354690551758), 
    new google.maps.LatLng(8.99304942330933, -79.55507040023804), 
    new google.maps.LatLng(8.99340971942355, -79.55554246902466), 
    new google.maps.LatLng(8.994427024163347, -79.55809593200684), 
    new google.maps.LatLng(8.99538074476034, -79.55865383148193), 
    new google.maps.LatLng(8.996715949374122, -79.55904006958008), 
    new google.maps.LatLng(8.998644569563421, -79.55929756164551), 
    new google.maps.LatLng(9.00163285086937, -79.55983400344849), 
    new google.maps.LatLng(9.002353425646092, -79.56019878387451), 
    new google.maps.LatLng(9.002862065800555, -79.5606279373169), 
    new google.maps.LatLng(9.003179965533809, -79.56120729446411), 
    new google.maps.LatLng(9.003455478409911, -79.56189393997192), 
    new google.maps.LatLng(9.003561444844816, -79.56315994262695), 
    new google.maps.LatLng(9.003794570892316, -79.563889503479), 
    new google.maps.LatLng(9.00385815069738, -79.56470489501953), 
    new google.maps.LatLng(9.004705880363112, -79.56584215164185), 
    new google.maps.LatLng(9.004981392076543, -79.56637859344482), 
    new google.maps.LatLng(9.005193324020915, -79.56706523895264), 
    new google.maps.LatLng(9.00557480120772, -79.56760168075562), 
    new google.maps.LatLng(9.005913891702521, -79.568030834198), 
    new google.maps.LatLng(9.00527809676389, -79.56989765167236), 
    new google.maps.LatLng(9.004875426057769, -79.57103490829468), 
    new google.maps.LatLng(9.004705880363112, -79.57221508026123), 
    new google.maps.LatLng(9.00542644901625, -79.5728588104248), 
    new google.maps.LatLng(9.006295368128981, -79.57279443740845), 
    new google.maps.LatLng(9.006846388923172, -79.57311630249023), 
    new google.maps.LatLng(9.006952354364218, -79.57339525222778), 
    new google.maps.LatLng(9.007227864365555, -79.57365274429321), 
    new google.maps.LatLng(9.007800076774254, -79.57320213317871), 
    new google.maps.LatLng(9.008308709265908, -79.57270860671997), 
    new google.maps.LatLng(9.009114042580409, -79.57270860671997), 
    new google.maps.LatLng(9.010004145734747, -79.57260131835938), 
    new google.maps.LatLng(9.010957825252689, -79.57223653793335), 
    new google.maps.LatLng(9.011233332200337, -79.57159280776978), 
    new google.maps.LatLng(9.011614803011797, -79.57030534744263), 
    new google.maps.LatLng(9.012526092764261, -79.56942558288574), 
    new google.maps.LatLng(9.013183067671367, -79.56886768341064), 
    new google.maps.LatLng(9.007143092079819, -79.57371711730957), 
    new google.maps.LatLng(9.007249057433896, -79.5740818977356), 
    new google.maps.LatLng(9.007121899005282, -79.57438230514526), 
    new google.maps.LatLng(9.007015933613943, -79.57474708557129), 
    new google.maps.LatLng(9.00688877510331, -79.57521915435791), 
    new google.maps.LatLng(9.006698037253514, -79.57558393478394), 
    new google.maps.LatLng(9.005892698555913, -79.57584142684937), 
    new google.maps.LatLng(9.005405255841069, -79.57639932632446), 
    new google.maps.LatLng(9.004981392076543, -79.57738637924194), 
    new google.maps.LatLng(9.004599914263602, -79.57798719406128), 
    new google.maps.LatLng(9.004197242802176, -79.57850217819214), 
    new google.maps.LatLng(9.004070083300151, -79.57869529724121), 
    new google.maps.LatLng(9.00385815069738, -79.58017587661743), 
    new google.maps.LatLng(9.003646217970399, -79.58084106445312), 
    new google.maps.LatLng(9.003349511943936, -79.58135604858398), 
    new google.maps.LatLng(9.002544165787846, -79.7544), 
    new google.maps.LatLng(9.0020779119304, -79.58212852478027), 
    new google.maps.LatLng(9.001463303654447, -79.58245038986206), 
    new google.maps.LatLng(9.0007215336547, -79.58330869674683), 
    new google.maps.LatLng(8.999598279045113, -79.58487510681152), 
    new google.maps.LatLng(9.000000955626966, -79.58521842956543) 
];

punti pittura dichiarazione variabili

var lineas = new google.maps.Polyline({ 
    path: ruta, 
    map: map, 
    strokeColor: '#222000', 
    strokeWeight: 4, 
    strokeOpacity: 0.6, 
    clickable: false 
}); 

var lineas2 = new google.maps.Polyline({ 
    path: ruta2, 
    map: map, 
    strokeColor: '#0000ff', 
    strokeWeight: 4, 
    strokeOpacity: 0.6, 
    clickable: false 
});

HTML

<body onload="initialize()"> 
    Ruta: Albrook - ciudad del Saber. 
     <br><br> 
     <div id="map_canvas" style="width:99%; height:99%"></div> 
    </body>

spero di lavorare

fonte

2016-04-29 17:50:41

Specificare il percorso esatto intrapreso in Google Maps

risposta

Problemi correlati