web-dev-qa-db-fra.com

polyligne snap to road en utilisant google maps api v3

Dans google maps api v2, c'était facile, 

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

Dans google api V3 cette manière simple ne fonctionne pas. Il existe quelque chose comme un service de guidage, mais je n'ai aucune idée de la façon dont je peux tracer une polyligne à travers mes points et la polyligne sera alignée sur la route.

javascriptgoogle-mapsgoogle-maps-api-3
27
Martus0

Vous étiez sur la bonne voie avec le service de direction. Voici un exemple de code:

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

Voir aussi mon exemple de travail: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

68
Chad Killingsworth

Il est préférable d’utiliser l’API Aligner sur les routes et de définir interpolate sur true pour obtenir la polyligne capturée parfaite . https://developers.google.com/maps/documentation/roads/snap

1
Ismail Moukafih