![折线使用谷歌地图api]( "折线使用谷歌地图api")
本文介绍了折线使用谷歌地图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;
// ==当用户点击地图时，从该点获取directiobns到自己==
gmarkers.push（new google.maps.LatLng（53.7877 ，-2.9832））;
gmarkers.push（new google.maps.LatLng（53.9007，-2.9832））;
gmarkers.push（新GLatLng（53.600，-2.700））;
$ b for（var i = 0; i console.log（gmarkers [i]）;
dirn.loadFromWaypoints（[gmarkers [i] .toUrlValue（6），gmarkers [i + 1] .toUrlValue（6）]，{getPolyline：true}）;
}
// ==当加载事件完成时，绘制街道上的点==
GEvent.addListener（dirn，加载，function（）{
//捕捉多段线中的最后一个顶点
var n = dirn.getPolyline（）。getVertexCount（）;
map.addOverlay（dirn.getPolyline（） ）;
gpolys.push（dirn.getPolyline（））;
dist + = dirn.getPolyline（）。getDistance（）;
document.getElementById（distance）。innerHTML =路径长度：+（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中，这种方式简单并不起作用。有一些像方向服务，但我没有任何想法，我怎么能通过我的点绘制折线和折线将被收购。
您与路线服务处于正确的轨道上。以下是示例代码：
var map，path = new google.maps.MVCArray（），
service = new google .maps.DirectionsService（），poly;
函数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 =新的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 path.push（result.routes [ 0] .overview_path [i]）;
}
}
}）;
}
}）;
}
另请参见我的工作示例：
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);
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]);
}
}
});
}
});
}
Also, see my working example: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm
这篇关于折线使用谷歌地图api v3捕捉道路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！