Google地图上的自定义路线/路径/道路
Dou*_*las 9 javascript google-maps google-maps-api-3
大家好.我需要知道我需要的是否可以实现.
我需要能够使用V2或V3(最好是3)创建在某种意义上忽略建筑物的路径.
我试图创建一个甚至一个kml文件来自己绘制所有路径,然后根据需要找到一些方法来打开/关闭它们.
例如.用户想要从A点到B点.在这些点之间是许多建筑物.用户在物理上可以穿过这些建筑物(这是一个校园).我想在地图上向他们展示.
这样你就不必在一个停车场周围进行循环 - 循环,只是为了到达它的另一端.
如果有任何方法可以做到这一点,我很想知道.
我需要的一个例子可以在这里找到:http://www.uottawa.ca/maps/
它是基于用户输入下拉菜单的两个输入的所有预定路径.我可以清楚地看到这一点.但我不知道a)这可以在v3中完成,以及b)他们自己如何做到这一点.
需要帮助,非常感谢!
如果您的校园不是很大,您可能需要考虑为每个排列手动定义所有折线路线,这样如果您有4个建筑物A,B,C和D,则需要定义6条路线:
A:B, A:C, A:D, B:C, B:D, C:D
然后简单地构建一些基本的JavaScript逻辑,当您选择将A构建为起点并将C构建为目标时,您将隐藏所有折线并仅显示A:C行.如果需要,您还可以使用Google的折线方法获取每条路线的长度(以米为单位).
这是根据您拥有的建筑物数量,您需要定义多少条路线的简短表格:
+-------------+--------+
| Buildings | Routes |
|-------------+--------+
| 5 | 10 |
| 10 | 45 |
| 15 | 105 |
| 20 | 190 |
| 25 | 300 |
+-------------+--------+
正如你所看到的那样,随着建筑物数量的增加,它真的失控了,所以我想说这个选项只适用于某一点.至少你很幸运,因为排列的顺序并不重要,假设人们可以在两个方向上走每条路线.
有趣的注意:我注意到您提供的渥太华演示在请求指示时没有进行任何AJAX调用.因此,他们很有可能按照上面的建议做同样的事情.
更新:
这是使用v3 Maps API的工作演示,我希望可以帮助您入门:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Campus</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 550px; height: 400px"></div>
<div>Start:
<select id="start">
<option>Building 1</option>
<option>Building 2</option>
<option>Building 3</option>
</select>
</div>
<div>End:
<select id="end">
<option>Building 1</option>
<option>Building 2</option>
<option>Building 3</option>
</select>
</div>
<input type="button" onclick="drawDirections();" value="GO" />
<script type="text/javascript">
var mapOptions = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(47.690, -122.310),
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Predefine all the paths
var paths = [];
paths['1_to_2'] = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.656, -122.360),
new google.maps.LatLng(47.656, -122.343),
new google.maps.LatLng(47.690, -122.310)
], strokeColor: '#FF0000'
});
paths['1_to_3'] = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.656, -122.360),
new google.maps.LatLng(47.656, -122.343),
new google.maps.LatLng(47.690, -122.270)
], strokeColor: '#FF0000'
});
paths['2_to_3'] = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.690, -122.310),
new google.maps.LatLng(47.690, -122.270)
], strokeColor: '#FF0000'
});
function drawDirections() {
var start = 1 + document.getElementById('start').selectedIndex;
var end = 1 + document.getElementById('end').selectedIndex;
var i;
if (start === end) {
alert('Please choose different buildings');
}
else {
// Hide all polylines
for (i in paths) {
paths[i].setOptions({ map: null });
}
// Show the route
if (typeof paths['' + start + '_to_' + end] !== 'undefined') {
paths['' + start + '_to_' + end].setOptions({ map: map });
}
else if (typeof paths['' + end + '_to_' + start] !== 'undefined') {
paths['' + end + '_to_' + start].setOptions({ map: map });
}
}
}
</script>
</body>
</html>
截图:
