Это мой первый опыт строительства карты, не претендую на оригинальность. Не бить и не оскорблять. Опыт брал в свободных источниках, компилировал и "допиливал".
Задача: от местоположения пользователя, которое сервис геолокации определяет автоматически, строим маршрут до каждого отдельного объекта (на каждой отдельной странице сайта).
Вот как это выглядит: жмите кнопку "Схема проезда" http://comfort.маршрут22.
Сразу понятно, что конечная точка маршрута неизменна для каждого объекта, поэтому она задается в БД и выводится через переменную в скрипты Яндекс.Карт
Код с небольшими комментариями
navigator.geolocation.getCurrentPosition(showMap, handleError);
// сначала определение местоположения пользователя, далее варианты сценария в случае типичных ошибок
function handleError(err) {
document.getElementById('map').innerHTML = err.message;
myCoords = [53.35, 83.76];
myZoom = 10;
ymaps.ready(init);
console.log(err);
}
// теперь задаем вариант развития событий в случае успешного определения местоположения
var myMap, route;
var myCoords = [];
var myZoom = 10;
function init () {
myMap = new ymaps.Map('map', {
center: myCoords,
zoom: 10,
controls: ['smallMapDefaultSet']
});
}
function showMap(position) {
if (position == undefined) {
myCoords = [51.3760, 83.5803];
myZoom = 10;
} else {
myCoords.push(position.coords.latitude);
myCoords.push(position.coords.longitude);
myZoom = 16;
}
/*ymaps.ready(init)*/;
// этот фрагмент пришлось закомментировать в данном примере, так как на сайте выводится 2 карты, и в диалоговом окошке
// выпрыгивало 2 карты
// если геолокация успешно "засекла" пользователя, то вариант № 1:
$('#search_route').submit(function () {
var start = [position.coords.latitude, position.coords.longitude];
var end = [<?php echo $geolocation; ?>];
// вот эта команда на PHP [<?php echo $geolocation; ?>] выводит геокоординаты из базы данных сайта
ymaps.route([
// При построении маршрута "посещаем" заданные точки
[start], [end]], {
// Опции маршрутизатора
mapStateAutoApply: true // автоматически позиционировать карту
}).then(function (router) {
route && myMap.geoObjects.remove(route);
route = router;
myMap.geoObjects.add(route);
$("#resmarshrut").append('Расстояние: '+route.getHumanLength());
$("#time").append('
Время в пути: '+route.getJamsTime()/60+' мин.');
}, function (error) {
alert("Возникла ошибка: " + error.message);
});
return false;
});
// если геолокация не работает либо очень сильно ошибается, пользователю предлагаем вручную ввести свой адрес - вариант № 2
$('#search_route2').submit(function () {
var start2 = $("#start2").val();
var end2 = [<?php echo $geolocation; ?>];
ymaps.route([
// Список точек, которые необходимо посетить
[start2], [end2]], {
// Опции маршрутизатора
mapStateAutoApply: true // автоматически позиционировать карту
}).then(function (router) {
route && myMap.geoObjects.remove(route);
route = router;
myMap.geoObjects.add(route);
$("#resmarshrut2").append('Расстояние: '+route.getHumanLength());
$("#time2").append('
Время в пути: '+route.getJamsTime()/60+' мин.');
}, function (error) {
alert("Возникла ошибка: " + error.message);
});
return false;
});
}
В таком виде это заработало!
Теперь HTML (учитываем то, что карта вызывается в диалоговом (некоторые говорят - модальном) окне ):
<code><a class="button" href="#" data-reveal-id="myModal">Схема проезда</a>
<div id="myModal" class="reveal-modal">
<div class="hero-unit">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9" style="line-height:20px;">
<p class="lead" style="color: #08C; margin: 10px 0px 5px;"><strong>Построение маршрута от Вас до выбранного объекта</strong></p>
</div>
</div>
<div class="row-fluid" style="line-height:10px;">
<div class="btn-toolbar">
<table width="98%" border="0" cellpadding="0">
<tbody>
<tr>
<form id="search_route"><td width="205"><input type="submit" class="btn btn-success" value="Проложить маршрут"/></td>
<td><div id="resmarshrut" style="margin: 10px 0px 5px;"></div></td>
<td><div id="time" style="margin: 4px 0px 8px;"></div></td>
</form>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-fluid">
<div id="map"></div>
</div>
<form id="search_route2">
<p class="lead" style="color: #EA4A1E; margin: 10px 0px 5px;"><strong>Если произошла ошибка, введите свой почтовый адрес в этой строке </strong></p>
<table width="98%" border="0" cellpadding="0">
<tbody>
<tr>
<td width="185">
<input id="start2" type="text" value="Здесь укажите адрес" style="width: 350px; margin: 10px 0px 5px;">
</td>
<td width="360">
<input type="submit" class="btn btn-danger" value="Проложить маршрут"/>
</td>
</tr>
<tr>
<td width="300">
<div id="time2" style="margin: 10px 0px 5px; font-size: medium;">
</td>
<td width="230">
<div id="resmarshrut2" style="margin: 10px 0px 5px; font-size: medium;"></div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
</code>
CSS и дополнительный Джава-скрипт для вывода окошка не буду описывать.
и так много слов.
Построение маршрутов "на автомате" с "подстраховкой" в виде ручного ввода. Yandex API 2.1
Пост в архиве.
С. А.
3 марта 2015, 17:54