Клуб API Карт

Удаление маршрута при закрытии балуна

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

только начинаю осваивать API Яндекс.Карт 2.0, сделал код для расчета пути и времени в пути, который должен выводиться в балуне при клике на метки, но к сожалению строится маршрут только до одной метки, в чем может быть проблема? =С

    <script type="text/javascript">

        var myMap, route;

        ymaps.ready(init);

 

//Определение начальных параметров карты

        function init () {

    var geolocation = ymaps.geolocation,

        coords = [geolocation.latitude, geolocation.longitude],

        myMap = new ymaps.Map('map', {

            center: coords,

                    zoom: 12,

behaviors: ["scrollZoom","MultiTouch"],

                }, {

 

                    balloonMaxWidth: 600

                });

 

//Добавляем элементы управления

searchControl = new SearchAddress(myMap, $('form'));

var trafficControl = new ymaps.control.TrafficControl();

myMap.controls                

                .add('zoomControl')     

.add('trafficControl')

                .add('typeSelector')    

                .add('mapTools');

 

//Запрос данных и вывод маркеров на карту

$.getJSON("vivodpointsmap.php",

function(json){

for (i = 0; i < json.markers.length; i++) {

 

var myPlacemark = new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon], {

                    // Свойства

                    iconContent: json.markers[i].icontext, 

hintContent: json.markers[i].hinttext,

balloonContentHeader: json.markers[i].balloontexthead,

                    balloonContentBody: json.markers[i].balloontext                   

}, {

                    // Опции

                    preset: json.markers[i].styleplacemark

                });

 

// Добавляем метку на карту

myMap.geoObjects.add(myPlacemark);

 

}

 

myPlacemark.events.add('click', function () {

var start = [geolocation.latitude, geolocation.longitude];

 

var end = myPlacemark.geometry.getCoordinates(); 

 

 ymaps.route([

[start], [end]], {

mapStateAutoApply: true,

avoidTrafficJams: true,

 }).then(function (router) {

 

route && myMap.geoObjects.remove(route);

route = router;

myMap.geoObjects.add(route);

x=Math.round(route.getJamsTime()/60);

x = x + 4;

myPlacemark.properties.set('balloonContentFooter','Примерное расстояние до Вас: '+route.getHumanLength()+'<br/>Примерное время ожидания: '+x+' мин.');

}

);

});

 

});

   myMap.geoObjects.add(

        new ymaps.Placemark(

            coords,

            {

iconContent: 'Я',

hintContent: 'Мое местоположение'

            }

        )

    );

        }

    </script>

6 комментариев

Вы переписываете указатель на myPlacemark на каждой итерации

И внутри обработчика события он будет указывать на последнюю с момента выхода из цикла метку

var end = myPlacemark.geometry.getCoordinates(); 

http://javascript.ru/book/definitiveguide


Андрей Кочанов
27 января 2016, 23:03

Тогда каким образом передать переменной координаты метки на которую нажал пользователь? И я так понимаю вызов события так же неправильный?

Передавать ссылку в замыкании в данном случае неправильно.

а также навешивать обработчики на каждую метку. Используйте делегирование событий на коллекции myMap.geoObjects

А ссылку на метку на которой произошло событие надо брать из объекта события

Андрей Кочанов
27 января 2016, 23:03

Ох, нельзя ли это показать примерами? Только-только начал изучать все это =С смысл понятен, но как реализовать совсем непонятно

Андрей Кочанов
27 января 2016, 23:03

спасибо Вам и документации, разобрался, но сделал немного иначе

 

myMap.geoObjects.events.add('click', function (e) {

  var thisPlacemark = e.get('target');

  

var start = [geolocation.latitude, geolocation.longitude];

 

var end = thisPlacemark.geometry.getCoordinates(); 

 

 ymaps.route([

[start], [end]], {

mapStateAutoApply: true,

avoidTrafficJams: true,

 }).then(function (router) {

 

route && myMap.geoObjects.remove(route);

route = router;

myMap.geoObjects.add(route);

x=Math.round(route.getJamsTime()/60);

x = x + 4;

thisPlacemark.properties.set('balloonContentFooter','Примерное расстояние до Вас: '+route.getHumanLength()+'
Примерное время ожидания: '+x+' мин.');

}

);

});

Только скобки вокруг start, end не нужны

 

 ymaps.route([start, end], { ...