Как удалить все метки с карты пользуясь geoQuery

74
08 февраля 2022, 14:10

Сижу уже 2 день голову ломаю. Получаю данные для меток через json из своей базы данных посредством ajax, через geoQuery. Есть карта регионов и меню сбоку со списком регионов, при клике на регион, появляются метки, нужно чтобы при нажатии на другой регион удалились все метки и добавились новые, а сейчас получается, что метки добавляются к старым.

{ "type": "FeatureCollection",  "Features": [
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      55.088535,
      36.654632
    ]
  },
  "properties": {
    "balloonContent": "MAGAZIN",
    "hintContent": "Только курьерская доставка"
  },
  "options": {
    "preset": "islands#greenDotIcon"
  }
} ]}

В документации Яндекс есть метод remove для GeoQueryResult . GeoQueryResult получается при получении json через geoQuery, но я не могу разобраться из-за слабых знаний js, как правильно работать с этим методом. В моем случае нужно удалять все полученные данные о метках и получить данные о других метках

Answer 1

UPD все оказалось намного проще, из-за слабых знаний js и yandex api изобретал велосипед. Удалял метки из объекта, а надо было с карты. map.geoObjects.removeAll();

$('.job-listing').click(function (e) {
    let elem = $(this),
        id = $(elem).attr('href');
    e.preventDefault();
    $.ajax({
        async: false,
        url: region.ajaxurl,
        data: {
            action: 'map',
            id: id,
        },
        dataType: 'json',
        success: function (response) {
            map.geoObjects.removeAll();
            let objects = response;
                ymaps.geoQuery(objects)
                    .addToMap(map);
        }
    });
    let coordinatsX = Number($(elem).attr('data-coordinatsX')),
        coordinatsY = Number($(elem).attr('data-coordinatsY')),
        zoom = Number($(elem).attr('data-zoom')),
        coordinats = [coordinatsX, coordinatsY];
    map.setCenter(coordinats, zoom, {
        checkZoomRange: true,
        duration: 1000,
    });
});

Нашел решение. В моем случае все работает как мне хотелось изначально, хоть и реализация кажется мне ужасной, а код говнокодистым. Буду рад если кто-то подскажет как улучшить код.

 $('.job-listing').click(function (e) {
    // по клику на ссылку осуществляется ajax запрос и передаются данные для получения объектов в json
    let elem = $(this),
        id = $(elem).attr('href');
    e.preventDefault();
    $.ajax({
        async: false,
        url: region.ajaxurl,
        data: {
            action: 'map',
            id: id,
        },
        dataType: 'json',
        success: function (response) {
       // удалить карту и создать новую с метками
            map.destroy();
            map = new ymaps.Map('map', {
                center: [61.698653, 99.505405],
                zoom: 3,
                type: 'yandex#map',
                controls: ['zoomControl']
            });
            var objects = response;
            ymaps.geoQuery(objects)
                .addToMap(map);
    }
});
  // получаю данные для наведения на карте на область 
    let coordinatsX = Number($(elem).attr('data-coordinatsX')),
        coordinatsY = Number($(elem).attr('data-coordinatsY')),
        zoom = Number($(elem).attr('data-zoom')),
        coordinats = [coordinatsX, coordinatsY];
    map.setCenter(coordinats, zoom, {
        checkZoomRange: true,
        duration: 1000,
    });
});
Answer 2

Вот похожий пример из песочницы: https://tech.yandex.ru/maps/jsbox/2.1/object_list добавление/удаление коллекции меток на карте.

READ ALSO
Перевод плагина Wordpress

Перевод плагина Wordpress

Для изменения языка сайта пользуюсь переключателем switch_to_locale($locale); Для тем все работает, для плагина нетЕсли к примеру переключимся с помощью...

76
While выводит только первую итерацию в цикле

While выводит только первую итерацию в цикле

Есть тестовый код в учебных целях, крутится на xampp:

71