Проблема с фильтрацией меток на карте

Question

Как сделать так, чтобы метки из массива json отображались в зависимости от введенного url адреса? Имеется json массив:

    {
    "type": "FeatureCollection",
    "features": [

{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [59.850676,30.326576]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Типанова 4", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Типанова 4</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [59.850703,30.328966]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Типанова 6", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Типанова 6</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [59.850052,30.325148]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Алтайская 12", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 12</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 3, "geometry": {"type": "Point", "coordinates": [59.849632,30.325947]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Алтайская 14", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 14</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 4, "geometry": {"type": "Point", "coordinates": [59.849668,30.327376]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Алтайская 16", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 16</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 5, "geometry": {"type": "Point", "coordinates": [59.849673,30.328633]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Алтайская 18 ", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 18 </s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 6, "geometry": {"type": "Point", "coordinates": [59.85036,30.329442]}, "properties": {"iconContent": "Адрес1", "balloonContentHeader": "Ленсовета 17", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Ленсовета 17</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 7, "geometry": {"type": "Point", "coordinates": [59.848809,30.322327]}, "properties": {"iconContent": "Адрес2", "balloonContentHeader": "Московский проспект 216 ", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Московский проспект 216 </s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 8, "geometry": {"type": "Point", "coordinates": [59.848461,30.32345]}, "properties": {"iconContent": "Адрес2", "balloonContentHeader": "Московский проспект 216а", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Московский проспект 216а</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 9, "geometry": {"type": "Point", "coordinates": [59.849108,30.324447]}, "properties": {"iconContent": "Адрес2", "balloonContentHeader": "Алтайская 7", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 7</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 10, "geometry": {"type": "Point", "coordinates": [59.848064,30.326199]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Алтайская 13", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 13</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 11, "geometry": {"type": "Point", "coordinates": [59.84885,30.327699]}, "properties": {"iconContent": "Адрес2", "balloonContentHeader": "Алтайская 21", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 21</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 12, "geometry": {"type": "Point", "coordinates": [59.849162,30.329235]}, "properties": {"iconContent": "Адрес2", "balloonContentHeader": "Алтайская 23", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 23</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 13, "geometry": {"type": "Point", "coordinates": [59.848886,30.32954]}, "properties": {"iconContent": "Адрес2", "balloonContentHeader": "Ленсовета 21", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Ленсовета 21</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 14, "geometry": {"type": "Point", "coordinates": [59.848045,30.325139]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Алтайская 9", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 9</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 15, "geometry": {"type": "Point", "coordinates": [59.847485,30.325723]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Алтайская 11", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 11</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 16, "geometry": {"type": "Point", "coordinates": [59.847503,30.326774]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Алтайская 17", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 17</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 17, "geometry": {"type": "Point", "coordinates": [59.848064,30.327232]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Алтайская 19", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Алтайская 19</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 18, "geometry": {"type": "Point", "coordinates": [59.84725,30.328022]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Ленсовета 27", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Ленсовета 27</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 19, "geometry": {"type": "Point", "coordinates": [59.84748,30.324681]}, "properties": {"iconContent": "Адрес3", "balloonContentHeader": "Московский проспект 220 корп2", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Московский проспект 220 корп2</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 20, "geometry": {"type": "Point", "coordinates": [59.846274,30.327897]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Ленсовета 31", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Ленсовета 31</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 21, "geometry": {"type": "Point", "coordinates": [59.846206,30.324725]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Орджоникидзе 6", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Орджоникидзе 6</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 22, "geometry": {"type": "Point", "coordinates": [59.845596,30.325318]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Орджоникидзе 8", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Орджоникидзе 8</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 23, "geometry": {"type": "Point", "coordinates": [59.846138,30.325812]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Орджоникидзе 10", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Орджоникидзе 10</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 24, "geometry": {"type": "Point", "coordinates": [59.8456,30.326369]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Орджоникидзе 12", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Орджоникидзе 12</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 25, "geometry": {"type": "Point", "coordinates": [59.846152,30.326863]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Орджоникидзе 14", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Орджоникидзе 14</s></strong>"},"options": {"preset": "islands#yellowIcon"}},
{"type": "Feature", "id": 26, "geometry": {"type": "Point", "coordinates": [59.845632,30.32742]}, "properties": {"iconContent": "Адрес4", "balloonContentHeader": "Орджоникидзе 16", "balloonContentBody": "Заказчик ###", "hintContent": "<strong>Орджоникидзе 16</s></strong>"},"options": {"preset": "islands#yellowIcon"}}



    ]
}

и java скрипт:

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [59.855452, 30.353181],
            zoom: 14
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterDisableClickZoom: true
        });

    // Чтобы задать опции одиночным объектам и кластерам,
    // обратимся к дочерним коллекциям ObjectManager.
    objectManager.objects.options.set('preset', 'islands#yellowDotIcon');
    objectManager.clusters.options.set('preset', 'islands#yellowClusterIcons');
    myMap.geoObjects.add(objectManager);
    
    

    $.ajax({
        url: "data.json"
    }).done(function(data) {
        objectManager.add(data);
    });

}

Как сделать так, чтобы метки отображались в зависимости от того, какой url вбить в адресную строку?

К примеру, введя:

www.site.com/......./....адрес1

пользователю отобразились метки с ключом

"Адрес1"

при этом другие метки не были ему видны.

Answer 1

можно сделать 2 файла json, и подгружать тут нужный с помощью бекенда

    $.ajax({
    url: "data.json"
}).done(function(data) {
    objectManager.add(data);
});

или капитально переделывать код под коллекции, и устанавливать свойство selected нужной используя document.location.

Answer 2

Решил зайти, поделиться решением. При загрузке сайта с ключом www.site.com/?page=Адрес1, отображаются все метки с ключом Адрес1 в iconContent из data.json

Сначала через getUrlVars() и window.location.href получаем нужный ключ url адреса. Затем с помощью фильтра objectManager.setFilter ищем строки в data.json, в которых iconContent совпадает с ключом из URL Только пришлось в data.json Адрес переделать в заглавный АДРЕС, чтобы не было путаницы с регистрами.

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [59.855452, 30.353181],
            zoom: 13,
            controls: ['zoomControl', 'searchControl', 'typeSelector',  'fullscreenControl', 'routeButtonControl']
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterBalloonMaxWidth: 300,
            clusterDisableClickZoom: true,
            
        });

    // Чтобы задать опции одиночным объектам и кластерам,
    // обратимся к дочерним коллекциям ObjectManager.
    objectManager.objects.options.set('preset', 'islands#yellowDotIcon');
    objectManager.clusters.options.set('preset', 'islands#yellowClusterIcons');
    myMap.geoObjects.add(objectManager);
    
    //получаем значение из url адреса
    function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
    return vars;
    }
    
    //декодируем кириллицу
    const encoded = decodeURI(getUrlVars()["page"]);
    
    //заглавный регистр
    var adres = encoded.toUpperCase();
    //alert(sector);
    
    //фильтр по совпадению с iconContent
    objectManager.setFilter(function (object) {
    return object.properties.iconContent == adres;}); 
    

    $.ajax({
        url: "data.json"
    }).done(function(data) {
        objectManager.add(data);
    //центрирование карты по меткам
        myMap.setBounds(myMap.geoObjects.getBounds()); 
    });
    


}

БЛОГ НА HUSL

Проблема с фильтрацией меток на карте

Ответы (2 шт):