Клуб API Карт

Можно ли настроить свой механизм удаления путевой точки с карты? По событию 'waypointremove'?

just8
17 февраля 2015, 16:21

Здравствуйте! 

Скажите пожалуйста, можно ли настроить свой механизм удаления путевой точки с карты? 

Не двойным кликом, как обычно, если включена опция 'removeWayPoints: true'. 

И по нему, промежуточные путевые точки удаляются. 

 

А сделать удаление выбранной точки маршрута, через ссылку в балуне "Удалить метку". 

 

Примерно так начал реализовывать:


Получаем массив всех точек маршрута:

var wayPoints = route.getWayPoints();

 

// По событию 'click', на любой выбранной точке создаем механизм:

wayPoints.events.add('click', function (e) {

 

 // получаем координаты точки на карте, по которой кликнули

 var coords_route_point = e.get('coordPosition');

 

 // получаем метку по которой кликнули

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

                     

 // Открываем балун с кнопками удаления над объектом, по которому кликнули

 myMap.balloon.open(coords_route_point, {contentBody: text_route + '<div id="menu_delete"><button type="submit" class="btn btn-warning" id="delete_route">Удалить маршрут</button> &nbsp; <button type="submit" class="btn btn-warning" id="delete_point">Удалить метку</button></div>'});

 

 ...далее идет механизм удаления всего маршрута, он уже готов.

 

 И далее необходимо сделать механизм удаления метки, по которой кликнули. При этом желательно, чтобы сокращался и сам маршрут, на удаленную метку. 

 Т.е. переделать пользовательски обработчик события 'waypointremove'. 

 

 Начал пробовать удалять полученную метку с карты. Но не получается:

 // Механизм удаления выбранной точки маршрута, по кнопке "Удалить метку".

 $('#menu_delete button[id=delete_point]').click(function () {

    console.log(target);

    myMap.geoObjects.remove(target);

 });

 

}


Механизм удаления добавил в обработчик события, обновления маршрута route.events.add("update",function () {..}

10 комментариев
Подписаться на комментарии к посту

В реальности все несколько сложнее.

Коллекция wayPoints это лишь отображение уже построенного маршрута и удаление точки из этой коллекции лишь удалит ее с карты, но не перестроит маршрут.

 

Если существующий редактор вас не устраивает и есть желание написать свой, я бы начал с изучения его кода (&mode=debug)

Хорошо, спасибо большое! Режим отладчика включил, попробую разобраться. 

Для простого случая, когда нет транзитных точек (viaIndexes), код удаления в обработчике клика выглядит примерно так 

 

var model = event.get("target").model,                    pointIndex = model.getReferencePointIndex(),                    points = model.multiRoute.getReferencePoints();                points.splice(pointIndex, 1);                model.multiRoute.setReferencePoints(points);

Если есть транзитные точки, то уже сложнее т.к. надо соотв. образом менять массив viaIndex, чтобы после удаления индексы транзитных точек были актуальны.

См. https://tech.yandex.ru/maps/doc/jsapi/2.1-dev/ref/reference/multiRouter.WayPointModel-docpage/

https://tech.yandex.ru/maps/doc/jsapi/2.1-dev/ref/reference/multiRouter.MultiRouteModel-docpage/

 

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

Попробую этот код под него подогнать. 

Спасибо вам!

Удаление выбранной точки маршрута, сделал таким образом wayPoints.remove(target); 

Сокращение геобъектов группы GeoObjectArray, содержащей точки маршрута, происходит после каждого удаления. 

 

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

При последующем клике по карте, маршрут перестраивается, уже по новым точкам по событию обновления маршрута. 

Но не сразу после удаления.

 

Просто удалить if(route) myMap.geoObjects.remove(route); и заново строить корректно не получается. 

 

Нет ли чего-то подобного setReferencePoint(referencePoint)? 

С указанием опорных точек, для простого маршрутизатора route?

Старые маршруты не умеют перестраиваться. По сути они статичны. Т.е. для того чтобы вам его перестроить, нужно запросить новый маршрут через ymaps.route и добавить его на карту, а предыдущий удалить.

Ок понятно, спасибо. Т.е. получить координаты оставшихся объектов группы GeoObjectArray и по ним строить новый. 

Хорошо, спасибо, буду пробовать.

А почему вы именно старые маршруты используете? Новый мультимаршрутизатор и удобнее и больше возможностей дает. Если вам не нужны альтернативные маршруты, то можно ограничить выдачу одним через параметры.

Было изначально задание сделать простую маршрутизацию кликом по карте, используя функционал route. 

Т.к. мультимаршрут показался немного излишним именно из-за нескольких линий маршрута. 

Хотя изначально я его также предлагал, строил через него первые варианты маршрутизации. 

Но решили остановиться на простой маршрутизации.

 

Потом в тз стал добавляться новый функционал и просьбы. В частности работа с драггерами, технологией drag-n-drop API, с возможностью перетягивания меток на карту и построения маршрута через них. Второй режим маршрутизации. Массовое геокодирование. Построение авиамаршрута с использованием геометрии polyline и ее редактирование. Удаление всех видов маршрутов и их точек через балуны. Чтобы отказаться от любых кнопок на карте, при построении и удалении. Добавление редакторов по каждому виду маршрутизации. Работа с внедрением html-форм в балуны меток и обработка их значений.

Добавились также различные калькуляторы. 


Код первоначального скрипта значительно возрос, сейчас достаточно сложно перевести его на мультимаршрутизацию. 

 

Хотя если такое возможно, нужно пробовать.  

Таким образом реализовал удаление выбранной путевой точки маршрута и его перестройку:

 

// Механизм удаления выбранной точки маршрута, по кнопке "Удалить метку".

$('#menu_delete button[id=delete_point]').click(function () {

  // Удаление метки по которой кликнули, с карты и из группы GeoObjectArray, с точками маршрута.

  wayPoints.remove(target);

  // Проверяем кол-во точек маршрута, после удаления выбранной точки

  console.log(wayPoints.getLength());

 

  // Перебираем все оставшиеся точки, присваиваем их координаты массиву point

  wayPoints.each(function (el, i) {

      point[i] = el.geometry.getCoordinates();

  });

 

  // Удаляем предыдущий маршрут

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

 

  ymaps.route(point, {

    // Опции маршрутизатора

    avoidTrafficJams: true, // строить маршрут с учетом пробок

    mapStateAutoApply: true // автоматически позиционировать карту

  }).then(function (router) {

 

  route = router;

  myMap.geoObjects.add(route);

 

  // Далее весь остальной код по маршрутизации.

  });

 

  // Закрываем открытый балун, с кнопками "Удалить метку", "Удалить маршрут".

  myMap.balloon.close();

  // После каждого пересчета точек после удаления метки, обнуляем массивы с пред. кол-вом точек.

  markers = [];

  point = [];

});

 

 

Спасибо Вам большое за помощь и советы!) Самому было бы трудно разобраться.