javascript 如何使 Google Maps V3 折线从给定点捕捉到道路？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15925947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Google Maps V3 polyline snap to road from given points?
提问by Kadar Annamaria
I try to make a polyline snap to road from given marker points. My problem is, that the same
code sometimes gives the good results, like in this image
我尝试从给定的标记点将折线捕捉到道路。我的问题是，相同的代码有时会给出好的结果，就像这张图片
and sometimes a bad result, like this:
有时会出现不好的结果，如下所示：
Any ideas why this is hapenning? And also, is there a limitation for polyline snap to road?
任何想法为什么会这样？而且，折线捕捉到道路是否有限制？
My map ini code:
我的地图ini代码：
var myLatlng = new google.maps.LatLng(47.6557, 23.5833);
var mapOptions = {
zoom: 14,
minZoom: 13,
maxZoom: 19,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
overviewMapControl: false,
streetViewControl: false,
scaleControl: false,
mapTypeControl: false,
panControl: true,
panControlOptions:{
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
}
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
My polyline route snap code:
我的折线路线捕捉代码：
var polys = new google.maps.Polyline({
map: map,
strokeColor: "#5555FF"
});
myCoord = [
new google.maps.LatLng(47.663383463156144, 23.58100461977301),
new google.maps.LatLng(47.659221287827435, 23.586240291770082),
new google.maps.LatLng(47.65534785438211, 23.576713085349184),
new google.maps.LatLng(47.66020405359421, 23.572249889548402)
];
// BEGIN: Snap to road
var service = new google.maps.DirectionsService(),polys,snap_path=[];
polys.setMap(map);
placeMarker(myCoord[0], map);
for(j=0;j<myCoord.length-1;j++){
service.route({origin: myCoord[j],destination: myCoord[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
polys.setPath(snap_path);
}
});
}
回答by geocodezip
If you just want directions with waypoints, you should just call the directionsServiceonce with those waypoints, something like this (not tested):
如果你只是想与航点的路线，你应该只调用为DirectionsService一次与航点，这样的事情（未测试）：
var service = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var waypts = [];
for(j=1;j<myCoord.length-1;j++){
waypts.push({location: myCoord[j],
stopover: true});
}
var request = {
origin: myCoord[0],
destination: myCoord[myCoord.length-1],
waypoints: waypts,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
service.route(request,function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else { alert("Directions request failed:" +status); }
});
Note: there is a maximum of 8 waypoints with the free API.
注意：免费 API 最多有 8 个航点。
