webentwicklung-frage-antwort-db.com.de

polylinie auf der Straße mithilfe von Google Maps in Version 3

In Google Maps api v2 war es einfach, 

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

In Google API V3 funktioniert diese einfache Art nicht. Es gibt so etwas wie einen Richtungsservice, aber ich habe keine Ahnung, wie ich eine Polylinie durch meine Punkte zeichnen kann, und die Polylinie wird an die Straße gebunden.

27
Martus0

Sie waren beim Richtungsservice auf dem richtigen Weg. Hier ist Beispielcode:

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

Siehe auch mein Arbeitsbeispiel: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

68

Es ist besser, die Snap to Roads-API zu verwenden und Interpolation auf true zu setzen, um eine perfekte Polylinie zu erhalten https://developers.google.com/maps/documentation/roads/snap

1
Ismail Moukafih