Google地图上的自定义路线/路径/道路 [英] Custom routes/paths/roads on Google Maps
问题描述
我需要能够使用V2或V3（最好是3）创建忽略建筑物的路径感觉。
我试图创建一个kml文件来自己绘制所有路径，然后找到一些方法根据需要打开/关闭它们。 / p>
例如。用户希望从A点到B点。在这些点之间是多个建筑物。用户身体上可以穿过这些建筑物（这是一个校园）。我想在地图上向他们展示。
这样，您不必在停车场周围进行循环解除循环，只需要转到另一端。
如果有任何方法可以做到这一点，我很想知道。
我需要的一个例子可以在这里找到： http://www.uottawa.ca / maps /
这些都是基于用户输入到下拉菜单中的两个输入的预定路径。我可以清楚地看到这一点。但我不知道如果a）这可以在v3中完成，b）他们自己如何做到这一点。
需要援助，并且非常感谢！如果你的校园不是很大，你可能需要考虑为每个排列手工定义所有的折线路线，例如：如果你的校园不是很大， A，B，C和D四座建筑物，您需要定义6条路线：
A：B，A： C，A：D，B：C，B：D，C：D
基本的JavaScript逻辑，当您选择建筑A作为起点并将C构建为目的地时，您将隐藏所有多段线并仅显示A：C线。您还可以使用Google的折线方法获取长度如果需要的话，每条路线的米数。
这是根据您拥有的建筑物数量，您需要定义多少条路线的简短表格： / p>
+ ------------- + -------- +
|建筑物|路线|
| ------------- + -------- +
| 5 | 10 |
| 10 | 45 |
| 15 | 105 |
| 20 | 190 |
| 25 | 300 |
+ ------------- + -------- +
正如您所看到的，随着建筑物数量的增加，它确实会失去控制，所以我会说这个选项只适用于某一点。至少你是幸运的，因为排列顺序并不重要，假设人们可以在两个方向上走每条路线。
有趣的提示：我注意到您提供的渥太华演示版在请求路线时不会进行任何AJAX呼叫。因此，他们很可能会按照上面的建议进行操作。
更新：
以下是使用 v3 Maps API ，我希望能够帮助您开始使用：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =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 =mapstyle =width：550px; height：400px>< / div>
< div>开始：
< select id =start>
< option> Building 1< / option>
< option> Building 2< / option>
< option> Building 3< / option>
< / select>
< / div>
< div>结束：
< select id =end>
< option> Building 1< / option>
< option> Building 2< / option>
< option> Building 3< / option>
< / select>
< / div>
< input type =buttononclick =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）;
//预定义所有路径
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（'请选择不同的建筑物'）;
}
else {
//隐藏所有多段线
for（i in paths）{
paths [i] .setOptions（{map：null}）;
}
//显示路径
if（typeof paths [''+ start +'_to_'+ end]！=='undefined'）{
路径[''+ start +'_to_'+ end] .setOptions（{map：map}）;
}
else if（typeof paths [''+ end +'_to_'+ start]！=='undefined'）{
paths [''+ end +'_to_'+ start ] .setOptions（{map：map}）;
}
}
}
< / script>
< / body>
< / html>
截图：
Hey guys. I need to know if what I need is achievable.
I need to be able to, using either V2 OR V3 (preferably 3), create paths which ignore buildings in a sense.
I was trying to create even a kml file to draw out all of the paths myself, and then find some way to turn them on/off as needed.
For example. The user wants to go from point A to point B. Between these points is a number of buildings. The user physically CAN walk through these buildings(it's a campus). I want to show them that on the map.
This way you don't have to do a loop-de-loop around, say, a parking lot, just to get to the other end of it.
If there is ANY way AT ALL to do this, I'd love to know.
An example of what I require can be found here: http://www.uottawa.ca/maps/
It's all pre-determined paths based on the two inputs from the user into the dropdown menu. I can plainly see this. But I have no clue if a) this can be done in v3, and b) how on earth they did it themselves.
Assistance required, and greatly appreciated!
If your campus is not very big, you may want to consider defining all the polyline routes by hand for each permutation, such that if you have 4 buildings A, B, C and D, you would need to define 6 routes:
A:B, A:C, A:D, B:C, B:D, C:D
Then simply build some basic JavaScript logic, that when you chose building A as starting point and building C as destination, you hide all polylines and show the A:C line only. You can also use Google's polyline methods to get the length in meters of each route, if this is required.
This is a short table of how many routes you would have to define, according to the number of buildings you have:
+-------------+--------+
| Buildings | Routes |
|-------------+--------+
| 5 | 10 |
| 10 | 45 |
| 15 | 105 |
| 20 | 190 |
| 25 | 300 |
+-------------+--------+
As you can see, it really gets out of control as the number of buildings goes up, so I would say that this option is only feasible to a certain point. At least you are lucky since the order of the permutations is not important, assuming that people can walk each route in both directions.
Interesting Note: I noticed that the Ottawa demo you supplied is not making any AJAX calls when requesting for directions. Therefore there is a good chance that they are doing the same as suggested above.
UPDATE:
Here is working demo using the v3 Maps API, which I hope can help you getting started:
<!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>
Screenshot:
这篇关于Google地图上的自定义路线/路径/道路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
