2016-04-22 13 views
7

Ist es möglich, eine exakte Route in Google Maps API anzuzeigen?Genaue Route in Google Maps eingeben

Grundsätzlich habe ich eine Liste von Breiten- und Längenkoordinaten (über 100 Punkte), die ich verwenden möchte, um die Reise anzuzeigen, die jemand mit der Routenplaner-API in Google Maps genommen hat.

Zum Beispiel, wenn ich den Anfang und das Ende verwenden koordiniert es wie so zeichnen:

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

Das Problem mit nur nur die Start- und Zielkoordinaten spezifizieren angezeigte Route die kürzeste Route nach Google Maps ist und nicht unbedingt die tatsächliche Route genommen, da es nicht weiß, auf welche anderen Koordinaten während der Reise navigiert wurde. Z.B. eine Person könnte von abgelegenen Nebenstraßen, Umweg zu anderen Orten auf dem Weg, usw.

Ich schaute in die Verwendung der Wegpunkte Teil der API https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints, aber anscheinend ist das auf nur 10 Punkte begrenzt, so dass es nicht wirklich geht Schnitt es ...

Gibt es eine andere Möglichkeit, mehrere Koordinaten zu übergeben, die dann die Reise auf der Karte zuordnen können? Ich versuche, den Weg einer Person zu zeigen (ähnlich dem, was man auf etwas wie Strava sieht).

+0

Eine Option könnte die [Roads API] werden (https://developers.google.com/maps/documentation/roads/intro) **, aber ** während dieses wie es klingt macht, was Sie wollen, 1. Ich bin nicht sicher, dass es für die Prime Time bereit ist (siehe die Problemliste, wählt nicht immer die richtigen Straßen), 2. Es hat eine begrenzte Größe von 100 Punkten und eine Quote, und 3. eine Mindestabtrennung von 400 m an Eingangspunkten. – geocodezip

Antwort

3

Hier ein kurzes Beispiel, wie man die Begrenzung von 10 Wegpunkten überwindet. Ich habe es mit 15 Wegpunkten getestet, habe aber keinen Fehler gemacht.

Wenn Sie hier nach "mehreren Wegpunkten" suchen, erhalten Sie viele Beispiele, damit Sie auswählen können, was am besten zu Ihrer Aufgabe passt.

genießen, 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>

2

ich dieses Beispiel verlassen, die zwei Routen setzen, beide denselben Ursprung zum gleichen Ziel gehen, verschiedene Routen Die Eroberungspunkte mit einem Windows Mobile Anwendung, sind nicht sehr präzise, ​​aber sie machen die Route. Lassen Sie das Beispiel unten. Verwenden Sie mehr als 10 Punkte auf der Strecke

Ich lasse den Link auf der Seite, wo wir veröffentlichen: Ruta

Hier erklären die varible mit Kartendaten:

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

}); 

Hier sind die Variablen enthält die beiden Routen, neue google.maps.LatLng Einsatz, die beiden cordenadas zu enthalten, ist es einfacher

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

Variablendeklaration Malerei Punkte

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> 

Ich hoffe, Sie arbeiten