gpt4 book ai didi

javascript - Google map 上的自定义路线/路径/道路

转载 作者:数据小太阳 更新时间:2023-10-29 03:53:17 27 4
gpt4 key购买 nike

我需要能够使用 V2 或 V3(最好是 3)创建在某种意义上忽略建筑物的路径。

我什至试图创建一个 kml 文件来自己绘制所有路径,然后找到一些方法根据需要打开/关闭它们。

例如。用户想从 A 点到 B 点。这些点之间是许多建筑物。用户实际上可以穿过这些建筑物(这是一个校园)。我想在 map 上向他们展示。

这样一来,您就不必绕着 parking 场(比如 parking 场)转一圈,就可以到达它的另一端。

如果有任何方法可以做到这一点,我很想知道。

可以在这里找到我需要的示例: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 线。您也可以使用谷歌的 polyline methods如果需要,获取每条路线的长度(以米为单位)。

这是一个简短的表格,根据您拥有的建筑物数量,您必须定义多少条路线:

+-------------+--------+
| Buildings | Routes |
|-------------+--------+
| 5 | 10 |
| 10 | 45 |
| 15 | 105 |
| 20 | 190 |
| 25 | 300 |
+-------------+--------+

如您所见,随着建筑物数量的增加,它真的会失控,所以我想说这个选项只在一定程度上可行。至少你很幸运,因为排列的顺序并不重要,假设人们可以在每条路线上双向行走。


有趣的注意事项:我注意到 Ottawa demo您提供的请求方向时没有进行任何 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>

截图:

Google Maps Campus

关于javascript - Google map 上的自定义路线/路径/道路,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2741808/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com