如何制作混合路径道路类型？ （捕捉到道路和简单的折线）Google Maps API
Posted
技术标签:
【中文标题】如何制作混合路径道路类型？ （捕捉到道路和简单的折线）Google Maps API【英文标题】：How to make mixed path road type? (snap to roads and simple polyline) Google Maps API 【发布时间】：2018-10-11 17:46:59 【问题描述】：我需要画出路径，但路上有航班。所以我想在my example 中制作类似的东西，但我需要在手册的初始页面上绘制它。但我不知道如何混合使用这两种绘制地图的方式（Polilyne 和 Snap to road）。它需要像这样从 lat lng 数组中工作：
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 键并单击它，它将绘制多段线。
如果 lat lng 返回 ZERO_RESULTS，我需要以某种方式更新代码，以便快速道路恢复使用折线绘制的道路，就像我的代码示例中一样。
这是我想做的： 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>【问题讨论】：
【参考方案1】：如果路线请求失败，请将点击的点添加到您的折线。
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);
代码 sn-p：
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>【讨论】：
【参考方案2】：这正是我需要的，谢谢大家的帮助！
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polylines</title>
<style>
#map
height: 100%;
html, body
height: 100%;
margin: 0;
padding: 0;
</style>
</head>
<body>
<div id="map"></div>
<script>
function initialize()
var pos = new google.maps.LatLng(47.229808, -1.560401);
var myOptions =
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var service = new google.maps.DirectionsService();
var path = [];
var cur = 1;
var trip = [
new google.maps.LatLng(22.396428,114.109497),
new google.maps.LatLng(13.756331,100.501765),
new google.maps.LatLng(1.352083,103.819836),
new google.maps.LatLng(-6.17511,106.865039),
new google.maps.LatLng(-6.917464,107.619123),
new google.maps.LatLng(-7.79558,110.36949),
new google.maps.LatLng(-8.409518,115.188916),
new google.maps.LatLng(22.396428,114.109497),
];
var poly = new google.maps.Polyline(
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 2
);
function build()
if (!trip[cur] || !trip[cur - 1])
// build map
poly.setPath(path);
map.fitBounds(bounds);
return;
bounds.extend(trip[cur]);
service.route(
origin: trip[cur - 1],
destination: trip[cur],
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
path.push(trip[cur]);
cur++;
build();
);
bounds.extend(trip[0]);
build();
poly.setMap(map);
;
window.onload = function()
initialize();
;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjkJC-gvn3j6T3gvd3aE2vbUS5qTEhi5s">
</script>
</body>
</html>【讨论】：
以上是关于如何制作混合路径道路类型？ （捕捉到道路和简单的折线）Google Maps API的主要内容，如果未能解决你的问题，请参考以下文章