折线使用谷歌地图api v3捕捉道路
在谷歌地图api v2这很容易,
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);
在谷歌API V3这种方式简单不工作。 有一些像方向服务,但我没有任何想法,我怎么能通过我的点画折线,折线将被摧毁的道路。
您与路线服务处于正确的轨道上。 这里是示例代码:
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]); } } }); } }); }
另请参阅我的工作示例: http : //people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm
最好使用Snap to Roads API,并将interpolate设置为true以获得完美的折叠折线。 https://developers.google.com/maps/documentation/roads/snap