Клуб API Карт

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

Пост в архиве.

Доброе врямя суток!

Не являюсь програмистом, но очень хочется реализовать на сайте удобную для пользователя карту проезда к магазину. Идея в том чтобы пользователь вводил свой адрес и для него прокладывался маршрут до заранее фиксированной конечной точки. Маршрут по Москве.

 

Два дня копаюсь в документации и примерах, сначала начал делать с нуля, но тяжеловато пошло - понял только азы! В итоге пошёл по пути адаптации найденного примера под свои нужды - не лучший путь, но не судите строго!  

 

<script type="text/javascript">
        $(function(){
            var maps = new Array(
            var ml = new Array(
            function loadMap(id, url) {
                    maps[id] = new YMaps.Map(YMaps.jQuery('#' + id)[0]
                    maps[id].addControl(new YMaps.Zoom()
                    maps[id].addControl(new YMaps.TypeControl()
                    ml[id] = new YMaps.YMapsML(url);
                    maps[id].addOverlay(ml[id]
                    YMaps.Events.observe(ml[id], ml[id].Events.Load, function (ml) {
                            maps[id].setBounds(ml.view.boundedBy);
                            if (id == 'map-example-shop_delivery') {
                                maps['map-example-shop_delivery'].setZoom(10);
                                                       
                    }
                    YMaps.Events.observe(maps[id], maps[id].Events.Redraw, function (map) {
                            map.setBounds(ml[id].view.boundedBy);
                    }
            }
            function createMap(id) {
                    maps[id] = new YMaps.Map(YMaps.jQuery(ap-example-shop_delivery)[0]
                    maps[id].addControl(new YMaps.Zoom()
//                    maps[id].addControl(new YMaps.TypeControl()
                    maps[id].setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
            }
           
            $('.b-map-example').each(function(i){
                if ($(this).attr('ymapsml')) {
                    loadMap($(this).attr('id'), $(this).attr('ymapsml')
                }
            }
       
           
                var geoResult;
                var router;
                // Функция для отображения результата геокодирования
        // Параметр value - адрес объекта для поиска
        function showAddress (value) {
           
            var map = maps['map-example-shop1'];
            // Удаление предыдущего результата поиска
            map.removeOverlay(geoResult);
            
            // Запуск процесса геокодирования
            var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds(), strictBounds: true}
                        // Создание обработчика для успешного завершения геокодирования
            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
                // Если объект был найден, то добавляем его на карту
                // и центрируем карту по области обзора найденного объекта               
                if (this.length()) {
                                    geoResult = this.get(0);
                                    coord = geoResult.getGeoPoint(
                                    geoResult.setBalloonContent(geoResult.text + '<br></br><span style="font-weight: bold; font-style: italic">извините, неправильный адрес</span>');
                                    ml['map-example-shop1'].forEach(function (obj, objIndex, group) {
                                        obj.forEach(function (obj, objIndex, group) {
                                            if (!obj.metaDataProperty.AnyMetaData.icon){
                                                if (obj.contains(coord)){
                                                    geoResult.setBalloonContent(geoResult.text + '<br></br><span style="font-weight: bold; font-style: italic">' + obj.description + '</span>');
                                                }
                                            }
                                        })
                                    }
                                    map.addOverlay(geoResult);
                                    geoResult.openBalloon(
                }else {
                  $('#example-shop1').siblings('.geocoder-error').show(
                }
            }
            // Процесс геокодирования завершен неудачно
            YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) {
                alert("Произошла ошибка: " + error);
            })
        }
                       
           
                function getRoute(value) {
                    var map = maps['map-example-shop_delivery'];
            // Удаление предыдущего результата поиска
            map.removeOverlay(geoResult);
            map.removeOverlay(router);
            // Запуск процесса геокодирования
            var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()}
                       
            // Создание обработчика для успешного завершения геокодирования
            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
                // Если объект был найден, то добавляем его на карту
                // и центрируем карту по области обзора найденного объекта               
                if (this.length()) {
                                    geoResult = this.get(0);
                                    coord = geoResult.getGeoPoint(
                                    geoResult.setBalloonContent(geoResult.text);
                                    ml['map-example-shop_delivery'].forEach(function (obj, objIndex, group) {
                                        obj.forEach(function (obj, objIndex, group) {
                                            router = new YMaps.Router([obj.getGeoPoint(), geoResult.getGeoPoint()]
                                            map.addOverlay(router);
                                            YMaps.Events.observe(router, router.Events.Success, function () {
                                                geoResult.setBalloonContent(geoResult.text + '<br></br><span style="font-weight: bold; font-style: italic">Расстояние: ' + Math.round(router.getDistance() / 1000)  + 'км.</span>');
                                            }
                                        })
                                    }
                                    map.addOverlay(geoResult);
                                    geoResult.openBalloon(
                }else {
                 $('#example-shop_delivery').siblings('.geocoder-error').show(
                }
            }
            // Процесс геокодирования завершен неудачно
            YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) {
                alert("Произошла ошибка: " + error);
            })
            
                }       
           
                if ($('#map-example-shop_delivery')[0]) {
                    YMaps.Events.observe(maps['map-example-shop_delivery'], maps['map-example-shop_delivery'].Events.Click, function (map, e) {
              getRoute(e.getCoordPoint()
            })
                    $('#example-shop_delivery').submit(function(){
                        var address = ($('#example-shop_delivery .b-form-input').bem('b-form-input').val() != '') ? 
                        $('#example-shop_delivery .b-form-input').bem('b-form-input').val() : $('#example-shop_delivery .b-form-input label').text()
                        getRoute(address);
                        return false;
                    })
                    $('#example-shop_delivery .b-form-input').click(function(){
                        $('#example-shop1').siblings('.geocoder-error').hide(
                    })
                }
           
            BEM.DOM.decl('b-tabbed-pane', {
            _onSelectTab : function(e, data) {
            this.__base.apply(this, arguments);
                maps[$('.b-map-example').eq(this.elem('tab').index(data.current)).attr('id')].redraw(
            }
           
            }
           
           
           
        })
    </script>
 

 

Ссылка на обкаточную страницу

Маршрут строится при щелчке по карте, но я никак не разберусь как поменять конечную точку (адрес до которого строится маршрут), в примере использован ymapsml - переделать никак не получается!

 

Карта выводится так

 

<div id="map-example-shop_delivery" class="b-map-example" style="height: 400px; width:624px;" ymapsml="http://maps.yandex.ru/export/usermaps/LbnHk9Cdhuz7a0YQA06gSHam_zIpV498/"></div>

 

Ну и конечно хотелось бы чтобы иожно было вводить адрес для построения маршута! Не подскажте как реализовать? 

 

Помогите пожалуйста разобраться!

 

 

 

 

3 комментария

Вы как то всё излишне усложнили

сервис маршрутизации может принимать на вход текстовый адрес,

и не требует предварительного геокодирования

Я знаю что код избыточен! Но с нуля что-то не получается! Документацию по маршрутизации изучал, но не могу понять как передать начальную точку через форму! Жёстко задать маршрут проблем нет...

 

не могу понять как передать начальную точку через форму!

 

с помощью jquery, например.