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)
]);
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.
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
Thanks for your help
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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
