Клуб API Карт

Как удалить/отключить отслеживание событий?

Dmi-Afonin
1 июня 2013, 12:20

Добрый день, участники клуба.

Я столкнулся со следующей проблемой. Мне нужно по событию установки/снятия галочки в чекбоксе добавлять/удалять возможность отслеживания кликов по карте.

В качестве образца я взял этот пример с Занимательной Веб-картографии, немного модернезировав его.

В примере отслеживание событий myMap.events.add('click', function (e) {...}} добавляется в init, у меня, при установке галки в чекбоксе, но при снятии галки я так и не смог отключить данный обработчик событий. Пытался шаманить с myMap.events.remove('click', ...), но у меня ничего не получилось.

 

Прошу помощи, текст всего примера ниже

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<style type="text/css">
html, body,#map, #YMapsID {
width: 100%;
height: 95%;
margin: 0;
padding: 0;

}
</style>
<script type="text/javascript">
   var myMap, route, ch =1;
   var markers = [];
   var point = [];
   window.onload = function () {
     ymaps.ready(init);
   }
   function init () {

    myMap = new ymaps.Map('map', {
    center: [56.314102,44.017161], 
    zoom: 14
    });

    //Добавляем элементы управления 
    myMap.controls  
    .add('zoomControl')  
    .add('typeSelector')  
    .add('mapTools') 
   }

   function calcRoute() {
    route && myMap.geoObjects.remove(route);  
    for(var i = 0, l = markers.length; i < l; i++) {
    point[i] = markers[i].geometry.getCoordinates();
   }
 
  ymaps.route(point, {
    // Опции маршрутизатора
    mapStateAutoApply: true // автоматически позиционировать карту
    }).then(function (router) {

      route = router;
      myMap.geoObjects.add(route);
    }, function (error) {
      alert("Возникла ошибка: " + error.message);
    });  
  }

   //Удаление маршрута и меток с карты и очистка данных
    function reset() {
      route && myMap.geoObjects.remove(route);
      for(var i = 0, l = markers.length; i < l; i++) {
      myMap.geoObjects.remove(markers[i]);
      }
      markers = []; 
      point = [];
      ch = 1;
    }

   function enableRoute() {
   if (document.getElementById('activeroute').checked)
   {
     //Отсеживаем событие клика по карте  
     myMap.events.add('click', function (e) {  
       var coords = e.get('coordPosition');
       if(markers.length < 10)
       {
          myPlacemark = new ymaps.Placemark([coords[0].toPrecision(6),coords[1].toPrecision(6)], {
          // Свойства
          // Текст метки
          iconContent: ch
       }, {
          // Опции
          // Иконка метки будет растягиваться под ее контент
          preset: 'twirl#blueStretchyIcon'
       });  

       markers.push(myPlacemark);
       myMap.geoObjects.add(myPlacemark);
       ch++;
       }
       else
       {
        alert("Вы задали максимальное количество точек");
      }
      });  

      document.getElementById('createRoute').disabled = false;
      document.getElementById('clearRoute').disabled = false;
    }
    else
    {
      document.getElementById('createRoute').disabled = true;
      document.getElementById('clearRoute').disabled = true;
      reset();
      //myMap.events.remove('click', ???); Здесь нужно убрать отслеживание событий! 
    }
   }
</script>
</head>
<body>
<div id="map"></div>
<input type="checkbox" id="activeroute" onclick="enableRoute()" />Маршрут
<input type="button" id="createRoute" value="Построить маршрут" onclick="calcRoute()" disabled />
<input type="button" id="clearRoute" value="Очистить" onclick="reset()" disabled />
</body>
</html>

 

 

3 комментария
Подписаться на комментарии к посту
в метод remove нужно передать ссылку на обработчик

Спасибо за подсказку, но у меня ничего не получается :(

При установке галочки появляется возможность ставить метки, но при снятии эта возможность не пропадает.

Как передать ссылку, не могу понять, возможно туплю...

 

Переписал кусок:

if (document.getElementById('activeroute').checked)
{
   //Отсеживаем событие клика по карте
   var onClick = function (e) {  
   var coords = e.get('coordPosition');
   if(markers.length < 10)
   {
     myPlacemark = new ymaps.Placemark([coords[0].toPrecision(6),coords[1].toPrecision(6)], {
     // Свойства
     // Текст метки
     iconContent: ch
     }, {
     // Опции
     // Иконка метки будет растягиваться под ее контент
     preset: 'twirl#blueStretchyIcon'
     });  
 
     markers.push(myPlacemark);
     myMap.geoObjects.add(myPlacemark);
     ch++;
   }
   else
   {
     alert("Вы задали максимальное количество точек");
   }
   };
   myMap.events.add("click", onClick);

   document.getElementById('createRoute').disabled = false;
   document.getElementById('clearRoute').disabled = false;
}
else
{
   document.getElementById('createRoute').disabled = true;
   document.getElementById('clearRoute').disabled = true;
   reset();
   myMap.events.remove("click", onClick);
}

Нашёл в руководстве описание, но не могу понять логику...

// Удаление обработчика события после того, как событие произошло
var onClick = function() {
     alert("Щелк!");
     myMap.events.remove("click", onClick);
   };
myMap.events.add("click", onClick);

 

Всем спасибо, похоже разобрался, переменную var onClick нужно было делать глобальной!