Построение маршрута по клику на карте

451

01 ноября 2017, 05:00

Подскажите, как реализовать следующую задачу: пользователь кликает по карте получает адрес той точки, на которую нажал, далее строится маршрут от некого заданного места, до той точки на которую нажал пользователь. Я реализовал появление адреса по клику, но проблема в отрисовке маршрута. Подскажите, где я неправ и как исправить?

<script>
ymaps.ready(init);
function init() {
    var myPlacemark,
        myMap = new ymaps.Map('map', {
            center: [55.755814, 37.617635],
            zoom: 15
        }, {
            searchControlProvider: 'yandex#search'
        });
    // Слушаем клик на карте.
    myMap.events.add('click', function (e) {
        var coords = e.get('coords');
        // Если метка уже создана – просто передвигаем ее.
        if (myPlacemark) {
            myPlacemark.geometry.setCoordinates(coords);
        }
        // Если нет – создаем.
        else {
            myPlacemark = createPlacemark(coords);
            myMap.geoObjects.add(myPlacemark);
            // Слушаем событие окончания перетаскивания на метке.
            myPlacemark.events.add('dragend', function () {
                getAddress(myPlacemark.geometry.getCoordinates());
            });
        }
        getAddress(coords);
        window.currCoords = coords;
        console.log(window.currCoords, 9999)
    });
    // Создание метки.
    function createPlacemark(coords) {
        return new ymaps.Placemark(coords, {
            iconCaption: 'поиск...'
        }, {
            preset: 'islands#violetDotIconWithCaption',
            draggable: true
        });
    }
    // Определяем адрес по координатам (обратное геокодирование).
    function getAddress(coords) {
        myPlacemark.properties.set('iconCaption', 'поиск...');
        ymaps.geocode(coords).then(function (res) {
            var firstGeoObject = res.geoObjects.get(0);
            myPlacemark.properties
                .set({
                    // Формируем строку с данными об объекте.
                    iconCaption: [
                        // Название населенного пункта или вышестоящее административно-территориальное образование.
                        firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
                        // Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания.
                        firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
                    ].filter(Boolean).join(', '),
                    // В качестве контента балуна задаем строку с адресом объекта.
                    balloonContent: firstGeoObject.getAddressLine()
                });
        });
    }
    if( window.currCoords != undefined ){
        var start_point = [55.718099, 37.617272]; // заданная точка от которой будем рисовать
        var end_point = window.currCoords; // точка по которой кликнул пользователь
        ymaps.route([start_point, end_point], {
            mapStateAutoApply: true,
            avoidTrafficJams: false,
            multiRoute: false,
            routingMode: "auto",
            viaIndexes: []
        }).then(function (route) {
            var points = route.getWayPoints();  
            points.get(0).properties.set('balloonContent', '');
            points.get(1).properties.set('balloonContent', 'Дистанция: '+route.getHumanLength()+'<br>Продолжительность: '+route.getHumanTime());
            points.get(0).properties.set('iconContent', 'А');
            points.get(1).properties.set('iconContent', 'Б');
            map.geoObjects.add(route);
        }, function (error) {
            // Ошибка error.message
        });
    }
}
</script>
<div id="map"></div>

Answer 1

Решил таким образом, решение конечно не идеальное, но может кому-нибуть пригодится

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script>
ymaps.ready(init);
var point = [];
var myPlacemark;
function init() {
    myMap = new ymaps.Map('map', {
        center: [55.755814, 37.617635],
        zoom: 15
    }, {
        searchControlProvider: 'yandex#search'
    });
    myMap.events.add('click', function (e) {
        var coords = e.get('coords');
        if (myPlacemark) {
            myPlacemark.geometry.setCoordinates(coords);
        }
        else {
            myPlacemark = createPlacemark(coords);
            myMap.geoObjects.add(myPlacemark);
            myPlacemark.events.add('dragend', function () {
                getAddress(myPlacemark.geometry.getCoordinates());
            });
        }
        getAddress(coords);
        window.currCoords = coords;
    });
    function createPlacemark(coords) {
        return new ymaps.Placemark(coords, {
            iconCaption: 'поиск...'
        }, {
            preset: 'islands#violetDotIconWithCaption',
            draggable: true
        });
    }
    function getAddress(coords) {
        myPlacemark.properties.set('iconCaption', 'РїРѕРёСЃРє...');
        ymaps.geocode(coords).then(function (res) {
            var firstGeoObject = res.geoObjects.get(0);
            myPlacemark.properties
                .set({
                    iconCaption: [
                        firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
                        firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
                    ].filter(Boolean).join(', '),
                    balloonContent: firstGeoObject.getAddressLine()
                });
        });
    }
}
function calcRoute() {  
    point[0] = [55.718099, 37.617272];
    point[1] = window.currCoords;
    console.log(point, window.currCoords);
    ymaps.route(point, {
        mapStateAutoApply: true 
    }).then(function (route) {
        myMap.geoObjects.add(route);
        var points = route.getWayPoints(),
            lastPoint = points.getLength() - 1;
        points.options.set('preset', 'islands#redStretchyIcon');
        points.get(0).properties.set('iconContent', 'Точка отправления');
        points.get(lastPoint).properties.set('iconContent', 'Точка прибытия');
        var moveList = 'Начинаем путь,</br>',
            way,
            segments,
            meters = '',
            finalMeters = '';
        // Получаем массив путей.
        for (var i = 0; i < route.getPaths().getLength(); i++) {
            way = route.getPaths().get(i);
            segments = way.getSegments();
            var meters = 0;
            for (var j = 0; j < segments.length; j++) {
                var street = segments[j].getStreet();
                meters += parseFloat(segments[j].getLength());
                moveList += (`Едем  ${segments[j].getHumanAction()}` + (street ? ' на ' + street : '') + `, проезжаем  ${segments[j].getLength()} м.,</br>`);
            }
        }
        moveList += 'Финальная точка.';
        // Выводим маршрутный лист.
        $('#delivery-route').append(moveList);
        $('#route-meters').append(`Маршрут в метрах: <span>${meters.toFixed(1)}</span>`);
    }, function (error) {
        alert("Возникла ошибка: " + error.message);
    });     
}
</script>
<div id="map"></div>
<div id="delivery-route"></div>
<div id="route-meters"></div>
<div id="pay-delivery"></div>
<input type="button" value="Построить маршрут" onclick="calcRoute()">