Pregunta Especifique la ruta exacta tomada en Google Maps


¿Es posible mostrar una ruta exacta tomada en Google Maps API?

Básicamente, tengo una lista de coordenadas lat y long (más de 100 puntos) que quiero usar para mostrar el viaje realizado por alguien usando la API de indicaciones en Google Maps.

Por ejemplo, si uso las coordenadas de inicio y fin para dibujarlo así:

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

El problema con solo especificar solo las coordenadas de inicio y fin, la ruta que se muestra es la más corta según Google Maps y no necesariamente la ruta real, ya que no sabe a qué otras coordenadas se hizo referencia durante el viaje. P.ej. una persona podría usar carreteras secundarias usadas, desviadas a otro lugar en el camino, etc.

Analicé el uso de la parte Waypoints de la API https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints pero aparentemente eso está limitado a solo 10 puntos, así que eso realmente no va a cortar ...

¿Hay alguna otra manera de pasar varias coordenadas que luego pueden trazar el viaje en el mapa? Estoy tratando de mostrar un camino tomado por una persona (similar a lo que puedes ver en algo como Strava).


7
2018-04-22 12:42


origen


Respuestas:


Aquí un ejemplo rápido de cómo superar la limitación de 10 waypoints. Lo probé con 15 puntos de referencia, pero no incluí ningún error de captura.

Si busca aquí "puntos de recorrido múltiples", obtendrá muchos ejemplos, para que pueda elegir eso, lo que mejor se adapta a su tarea.

disfruta, 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() {
	var mapOptions = {
		center: new google.maps.LatLng(51.429772, 6.83753),
		zoom: 13,
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	info = document.getElementById('info');
	pointsToPath();
}

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

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

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

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


function calcRoute() {

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

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

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

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

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


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


3
2018-04-28 18:00



Dejo este ejemplo, que pone dos rutas, ambas van del mismo origen al mismo destino, diferentes rutas Los puntos de captura con una aplicación de Windows Mobile no son muy precisos, pero hacen la ruta. Deje el ejemplo a continuación. Usa más de 10 puntos en la ruta

Dejo el enlace de la página donde publicamos:Ruta

Aquí declara el varible con datos del mapa:

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

});

Aquí están las variables que contienen las dos rutas, el nuevo uso de google.maps.LatLng, para contener las dos cordenadas, es más fácil

    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.973116012381766, -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.58197832107544),
    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)
];

puntos de pintura de declaración variable

    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>

Espero que trabajes


2
2018-04-29 17:50