如何制作混合路径道路类型? (捕捉道路和简单的折线)Google Maps API [英] How to make mixed path road type? (snap to roads and simple polyline) Google Maps API
本文介绍了如何制作混合路径道路类型? (捕捉道路和简单的折线)Google Maps API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要绘制路径，但是道路上正在飞行.因此，我想在我的示例中进行修改，但是我需要在其上进行绘制手册的页面初始化瞬间.但是我不知道如何混合使用这两种方式来绘制地图(Polilyne和Snap to roads).它需要像这样的lat lng数组工作:
I need to draw the path, but the road has the flights on the way. So I want to make something like in my example, but I need to draw it on page init instant of a manual. But I don't know how to mix this two ways to draw maps (Polilyne and Snap to roads). It needs to works from an array of lat lng like that:
var points = new google.maps.MVCArray([
new google.maps.LatLng(39.9042, 116.407396),
new google.maps.LatLng(34.341574, 108.93977),
new google.maps.LatLng(31.23039, 121.473702),
new google.maps.LatLng(31.298974, 120.585289),
new google.maps.LatLng(30.274084, 120.15507),
new google.maps.LatLng(25.234479, 110.179953),
new google.maps.LatLng(23.12911, 113.264385),
new google.maps.LatLng(22.543096, 114.057865),
new google.maps.LatLng(22.279991, 114.158798)
]);
这是我的代码: 如果单击地图，则将绘制对齐道路的路径；如果按住Shift键并单击，将绘制折线.
Here is my code: If you click on the map it draws the snap to roads path and if you hold the Shift key and click it will draw the polyline.
我需要以某种方式更新代码，以使lat lng对于折断道路返回ZERO_RESULTS时，像我的代码示例中那样，使用折线恢复道路绘图.
I need somehow update the code to make if lat lng return ZERO_RESULTS for the snap roads resume the road drawing with polyline like in my code example.
这就是我想要做的: 地图示例
Here is the what I want to make: map example
感谢您的帮助
var map, path = new google.maps.MVCArray(),
service = new google.maps.DirectionsService(),
shiftPressed = false,
poly;
google.maps.event.addDomListener(document, "keydown", function(e) {
shiftPressed = e.shiftKey;
});
google.maps.event.addDomListener(document, "keyup", function(e) {
shiftPressed = e.shiftKey;
});
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 (shiftPressed || path.getLength() === 0) {
path.push(evt.latLng);
if (path.getLength() === 1) {
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]);
}
}
});
}
});
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
#map_canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body onload="Init()">
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s"></script>
</body>
推荐答案
如果路线请求失败，则将单击的点添加到折线中.
If the directions request fails, add the clicked point to your polyline.
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]);
}
} else {
console.log("directions request failed:"+status);
// add point to polyline (makes a straight line segment
path.push(evt.latLng);
}
代码段:
var map, path = new google.maps.MVCArray(),
service = new google.maps.DirectionsService(),
shiftPressed = false,
poly;
google.maps.event.addDomListener(document, "keydown", function(e) {
shiftPressed = e.shiftKey;
});
google.maps.event.addDomListener(document, "keyup", function(e) {
shiftPressed = e.shiftKey;
});
function Init() {
var myOptions = {
zoom: 7,
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 (shiftPressed || path.getLength() === 0) {
path.push(evt.latLng);
if (path.getLength() === 1) {
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]);
}
} else {
console.log("directions request failed:" + status);
// create polyline
path.push(evt.latLng);
}
});
}
});
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
#map_canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body onload="Init()">
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s"></script>
</body>
这篇关于如何制作混合路径道路类型? (捕捉道路和简单的折线)Google Maps API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
