使用谷歌地图 api v3 折线捕捉到道路 [英] polyline snap to road using google maps api v3
本文介绍了使用谷歌地图 api v3 折线捕捉到道路的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在谷歌地图 api v2 中很容易,
In google maps api v2 it was easy,
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);
在 google api V3 中,这种简单的方法行不通.有类似路线服务的东西,但我不知道如何通过我的点绘制折线,折线将被捕捉到道路.
In google api V3 this way simple doesnt work. There is something like directions service but I dont have any idea how I can draw polyline through my points and polyline will be snaped to road.
推荐答案
您在使用路线服务方面走在正确的轨道上.这是示例代码:
You were on the right track with the directions service. Here's sample 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]);
}
}
});
}
});
}
另外,请参阅我的工作示例:http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm
Also, see my working example: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm
这篇关于使用谷歌地图 api v3 折线捕捉到道路的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文