Клуб API Карт

Построение маршрутов "на автомате" с "подстраховкой" в виде ручного ввода. Yandex API 2.1

alexsp2007
3 марта 2015, 17:54

Это мой первый опыт строительства карты, не претендую на оригинальность. Не бить и не оскорблять. Опыт брал в свободных источниках, компилировал и "допиливал".
Задача: от местоположения пользователя, которое сервис геолокации определяет автоматически, строим маршрут до каждого отдельного объекта (на каждой отдельной странице сайта).

Вот как это выглядит: жмите кнопку "Схема проезда" http://comfort.маршрут22.рф/index.php?route=product/product&path=18&product_id=28
Сразу понятно, что конечная точка маршрута неизменна для каждого объекта, поэтому она задается в БД и выводится через переменную в скрипты Яндекс.Карт

Код с небольшими комментариями

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">&#215;</a>
        </div>
</code>

CSS и дополнительный Джава-скрипт для вывода окошка не буду описывать.
и так много слов.