polyline snap vào đường sử dụng bản đồ google api v3

Question

Trong bản đồ google api v2 nó là dễ dàng,

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

Trong google api V3 cách doesnt làm việc đơn giản này. Có một cái gì đó giống như dịch vụ hướng dẫn nhưng tôi không có bất kỳ ý tưởng làm thế nào tôi có thể vẽ polyline thông qua các điểm của tôi và polyline sẽ được snaped đường.

Answer 1

Bạn đã đi đúng hướng với dịch vụ chỉ đường. Dưới đây là mẫu mã:

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

Ngoài ra, xem ví dụ làm việc của tôi: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

Answer 2

của nó tốt hơn để sử dụng Snap để Roads API, và thiết lập suy true để có được polyline snaped hoàn hảo. https://developers.google.com/maps/documentation/roads/snap