polilínea complemento a la carretera usando API de Google Maps v3

en Google Maps API v2 era fácil,polilínea complemento a la carretera usando API de Google Maps v3

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 esta forma tan 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.

Fuente

2012-05-09 Martus0

Estabas en el buen camino con el servicio de indicaciones. Aquí está el código de ejemplo:

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

También, vea mi ejemplo de trabajo: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

Fuente

2012-05-09 11:51:19

Gracias, limpio y conciso. –

@ chad-killingsworth así que si estoy leyendo esto correctamente, se supera la limitación máxima de 8 puntos de referencia, llamando al DirectionsService con cada clic, y luego almacenando todos esos resultados en una matriz. Digamos que quería mostrar automáticamente un marcador en cada incremento de 1 milla, similar a gmaps-pedometer.com; alguna idea de cómo hacer eso con la API? –

Disculpe, ignore la segunda mitad de la pregunta anterior; encontré la respuesta aquí: http://stackoverflow.com/questions/2698112/how-to-add-markers-on-google-maps-polylines-based-on-distance-along-the-line ... no exactamente sencillo y parece que necesita ser revisado para v3 pero parece factible ... –

que es mejor usar Ajustar a la API de Carreteras, y establecer interpolar en true para obtener polilínea snaped perfecto. https://developers.google.com/maps/documentation/roads/snap

Fuente

2017-01-03 14:01:39

cómo agregar marcadores (por ejemplo & marcadores = color: rojo | etiqueta: D | 54.5661310, -1.2505580) en la URL del mapa estático? –

polilínea complemento a la carretera usando API de Google Maps v3

Respuesta

Cuestiones relacionadas