[英]polyline snap to road using google maps api v3
在google maps 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以獲得完美的snaped折線。 https://developers.google.com/maps/documentation/roads/snap
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.