Группировка json

115
12 декабря 2021, 23:10

Не могли бы подсказать. У меня несколько вопросов. Кратко опишу задачу. Есть координаты в json. Есть отдельно список с адресами. Есть карта. Как соотнести адреса с точками на карте, чтобы при клике на "ссылку" открывалась конкретная точка?

Есть файл json. Взят из примера

Структура вида:

{
"type": "FeatureCollection",
"features": [
    {"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
    {"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},

]}

    ymaps.ready(init);
function init () {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 10,
            maxAnimationZoomDifference: 50,
            controls: []
        }, {
            searchControlProvider: 'yandex#search'
        }),
    // Создадим пользовательский макет ползунка масштаба.
    ZoomLayout = ymaps.templateLayoutFactory.createClass("<div>" +
        "<div id='zoom-in' class='btn'><i class='icon-plus'></i></div><br>" +
        "<div id='zoom-out' class='btn'><i class='icon-minus'></i></div>" +
        "</div>", {
        // Переопределяем методы макета, чтобы выполнять дополнительные действия
        // при построении и очистке макета.
        build: function () {
            // Вызываем родительский метод build.
            ZoomLayout.superclass.build.call(this);
            // Привязываем функции-обработчики к контексту и сохраняем ссылки
            // на них, чтобы потом отписаться от событий.
            this.zoomInCallback = ymaps.util.bind(this.zoomIn, this);
            this.zoomOutCallback = ymaps.util.bind(this.zoomOut, this);
            // Начинаем слушать клики на кнопках макета.
            $('#zoom-in').bind('click', this.zoomInCallback);
            $('#zoom-out').bind('click', this.zoomOutCallback);
        },
        clear: function () {
            // Снимаем обработчики кликов.
            $('#zoom-in').unbind('click', this.zoomInCallback);
            $('#zoom-out').unbind('click', this.zoomOutCallback);
            // Вызываем родительский метод clear.
            ZoomLayout.superclass.clear.call(this);
        },
        zoomIn: function () {
            var map = this.getData().control.getMap();
            map.setZoom(map.getZoom() + 1, {checkZoomRange: true});
        },
        zoomOut: function () {
            var map = this.getData().control.getMap();
            map.setZoom(map.getZoom() - 1, {checkZoomRange: true});
        }
    }),
    zoomControl = new ymaps.control.ZoomControl({options: {layout: ZoomLayout}});
    myMap.controls.add(zoomControl);

    objectManager = new ymaps.ObjectManager({
        clusterize: false,
        gridSize: 32
    });

    // Чтобы задать опции одиночным объектам и кластерам,
    // обратимся к дочерним коллекциям ObjectManager.
    objectManager.objects.options.set({
        iconLayout: 'default#image',
        iconImageHref: 'img/svg/point.svg',
        iconImageSize: [30, 42],
        iconImageOffset: [-3, -42]
    });    
myMap.geoObjects.add(objectManager);
$.ajax({
    url: "js/data.json"
}).done(function(data) {
    objectManager.add(data);
});
}
Answer 1

Задаем data-id для каждого пункта. Id уже проставлены. А потом просто:

$('span.show-on-the-map').click(function() { 
    $ids = $(this).parent().parent('.wherebuy__list__item').data('id'); // получаем data id
    objectManager.objects.balloon.open($ids); // показываем на карте
    $('.wherebuy__map').addClass('active'); //показываем карту
});
READ ALSO
Хранение секретных ключей в JS

Хранение секретных ключей в JS

Есть проблема: необходимо держать API ключ в Front-End JS, чтобы через код элемента никто его не узнал бы его, как это реализовать? Backend на Express, сам...

65
ReWrite в htaccess

ReWrite в htaccess

у меня формируется адрес siteru/lk/confirmation

95
Есть ли метод создания статического веб сайта, в котором полностью отсувтсвуют расширения файлов .html в ссылках?

Есть ли метод создания статического веб сайта, в котором полностью отсувтсвуют расширения файлов .html в ссылках?

Есть сайт компании с движком на MODxПланирую избавиться от движка и сделать из него полностью статический сайт

196
Переход в другой файл по нажатию кнопки

Переход в другой файл по нажатию кнопки

Есть 2 файла, на одном из них есть кнопка при нажатие на которую должно перекидывать в другой файл (там тоже форма)Но происходит ошибка "Internal...

177