javascript - tutorial - google maps jquery

polilínea complemento a la carretera con google maps api v3

Question

En google maps api v2 fue fácil,

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(53.7877, -2.9832),13)
// map.addControl(new GLargeMapControl());
// map.addControl(new GMapTypeControl());
var dirn = new GDirections();
// var firstpoint = true;
var gmarkers = [];
var gpolys = [];
var dist = 0;
// == When the user clicks on a the map, get directiobns from that point to itself ==
gmarkers.push(new google.maps.LatLng(53.7877, -2.9832));
gmarkers.push(new google.maps.LatLng(53.9007, -2.9832));
gmarkers.push(new GLatLng(53.600, -2.700));
for (var i = 0; i < gmarkers.length-1; i++) {
console.log(gmarkers[i]);
dirn.loadFromWaypoints([gmarkers[i].toUrlValue(6),gmarkers[i+1].toUrlValue(6)],{getPolyline:true});
}
// == when the load event completes, plot the point on the street ==
GEvent.addListener(dirn,"load", function() {
// snap to last vertex in the polyline
var n = dirn.getPolyline().getVertexCount();
map.addOverlay(dirn.getPolyline());
gpolys.push(dirn.getPolyline());
dist += dirn.getPolyline().getDistance();
document.getElementById("distance").innerHTML="Path length: "+(dist/1000).toFixed(2)+" km. "+(dist/1609.344).toFixed(2)+" miles.";
});
GEvent.addListener(dirn,"error", function() {
GLog.write("Failed: "+dirn.getStatus().code);
});
console.log(dirn);

En google api V3 de esta manera simple no funciona. Hay algo así como el servicio de indicaciones, pero no tengo idea de cómo puedo dibujar la polilínea a través de mis puntos y la polilínea se irá al camino.

Answer 1

Es mejor usar la API Snap to Roads, y establecer interpolate en true para obtener una polilínea snapped perfecta. https://developers.google.com/maps/documentation/roads/snap

Answer 2

Estabas en el camino correcto con el servicio de indicaciones. Aquí hay un código de muestra:

var map, path = new google.maps.MVCArray(),
service = new google.maps.DirectionsService(), poly;
function Init() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(37.2008385157313, -93.2812106609344),
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE]
},
disableDoubleClickZoom: true,
scrollwheel: false,
draggableCursor: "crosshair"
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
poly = new google.maps.Polyline({ map: map });
google.maps.event.addListener(map, "click", function(evt) {
if (path.getLength() === 0) {
path.push(evt.latLng);
poly.setPath(path);
} else {
service.route({
origin: path.getAt(path.getLength() - 1),
destination: evt.latLng,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length;
i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
});
}

Además, vea mi ejemplo de trabajo: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm