Если ваш кампус не очень большой, вы можете рассмотреть возможность определения всех маршрутов полилиний вручную для каждой перестановки, так что если у вас есть 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 |
+-------------+--------+
Как видите, он действительно выходит из-под контроля по мере увеличения количества зданий, поэтому я бы сказал, что этот вариант выполним только в определенной точке. По крайней мере, вам повезло, поскольку порядок перестановок не важен, если предположить, что люди могут идти по каждому маршруту в обоих направлениях.
Интересное примечание: Я заметил, что предоставленная вами демонстрация Ottawa не выполняет никаких вызовов AJAX при запросе указаний. Поэтому есть большая вероятность, что они делают то же самое, что предложено выше.
UPDATE:
Вот рабочая демонстрация с использованием 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>
Скриншот:
