@dolphin7793
Фронтэнд-разработчик

Работа с Яндекс картой на JS?

Добрый день! Помогите пожалуйста с правильным отображением точек на яндекс карте. Есть модалка выбора региона - первый уровень просто список городов, заходишь в город проваливаешься в список адресов этого города. Соответственно точки на карте должны отображаться в соответствии в каком ты сейчас городе. HTML на liquid Карта отображает точки текущего выбранного региона. Понимаю, что при клике на modal-region-cities__btn нужно создавать новую карту с точками данного города. Но как правильно, пока не получается. На данный момент, если выбран город и заходишь в другой, отображаются точки текущего города

document.addEventListener('DOMContentLoaded', function(e){
    const linkChooseRegion = document.querySelectorAll('.rmc-choice-city-link');
    const linkChooseAddress = document.querySelectorAll('.modal-region-cities__btn');
    const modalChooseRegionNew = document.querySelector('.default-select-region-modal_new');
    linkChooseRegion.forEach(function(element, key){    
        element.addEventListener('click', function(e){
            e.preventDefault();
            var currRegionID = this.getAttribute('data-objectID');
            showYaMapNew(currRegionID, modalChooseRegionNew);
        });
    });

 });
function showYaMapNew(currRegionID, modalChooseRegionNew) {
    let isYaMapNew = document.querySelector('#map_new');
    
    if ( currRegionID ) {
        if ( modalChooseRegionNew.querySelector(`[data-objectID='${currRegionID}']`) ) {
            modalChooseRegionNew.querySelector(`[data-objectID='${currRegionID}']`).classList.add('curr-region-active');
            modalChooseRegionNew.querySelector(`[data-objectID='${currRegionID}']`).closest('.modal-region-cities-address').classList.add('address-active');
        }
    }
    
    var isRegion;
    if ( document.querySelector('.curr-region-active') ) {
        var activeRegion = document.querySelector('.curr-region-active');
        var activeRegionCord = activeRegion.dataset.cord;
    }

    var listAddress = document.querySelector('.address-active');
    var listRegionCord = listAddress.querySelectorAll('.modal-region-cities-address__item[data-cord]');
    var centerMapCord;

    if ( activeRegionCord && activeRegionCord != '' ) {
        activeRegionCord = activeRegionCord.split(',');
        centerMapCord = activeRegionCord;
    } else {
        centerMapCord = [55.753215, 37.622504];
    }

    console.log(listRegionCord);
    
    listRegionCord.forEach(function(element, key){ 
        if ( element.getAttribute('data-cord') != '' ) {
            isRegion = true;
        }
    });
    if ( isYaMapNew && isRegion && modalChooseRegionNew ) { 
        ymaps.ready(init);
        function init() {
            var myMapNew = new ymaps.Map("map_new", {
                    center: centerMapCord,
                    zoom: 10,
                    controls: ['zoomControl']
                });

            var arrAddressList = new Array;
            var objAdress;
            listRegionCord.forEach(function(element, key){
                let addressCord = element.getAttribute('data-cord');
                let addressContent = element.getAttribute('data-address');
                if ( !addressContent ) {
                    addressContent = 'не указан';
                }
                let addressPhone = element.getAttribute('data-phone');
                let addressWorkMode = element.getAttribute('data-work');
                let arrAddressCord = addressCord.split(',');
                let currentLink = element.querySelector('a').getAttribute('href');
                let currentObj = element.getAttribute('data-objectID');
            
                var baloonText = "<div style='margin-bottom:10px;' class='modal-region-cities__title_baloon'>" + addressContent + "</div>";

                if ( addressPhone != null && addressPhone != '') {
                    baloonText += "<div style='margin-bottom:5px;' class='modal-region-cities__phone_baloon'>" + addressPhone + "</div>";
                } else {
                    baloonText += '';
                }
                if ( addressWorkMode != null && addressWorkMode != '') {
                    baloonText += "<div class='modal-region-cities__mode_baloon'>" + addressWorkMode + "</div>";
                } else {
                    baloonText += '';
                }
                baloonText += "<a href='" + currentLink + "' class='btn-p' style='margin-top:10px;'></a>";
                objAdress = {
                    type: "Feature",
                    id: currentObj,
                    geometry: {
                        type: "Point",
                        coordinates: arrAddressCord
                    },
                    properties: {
                        balloonContent: baloonText
                    }
                    };
                arrAddressList.push(objAdress);
                return arrAddressList;
            });
            var collection = {
                type: "FeatureCollection",
                features: arrAddressList
                };
            objectManager = new ymaps.ObjectManager({clusterize: true});
            objectManager.add(collection);

            objectManager.objects.events.add('click', function (e) {
                var objectId = e._sourceEvent.originalEvent.objectId;
                viewObject(objectId);
            });
            myMapNew.geoObjects.add(objectManager);
            /* myMapNew.setBounds(myMapNew.geoObjects.getBounds(), {checkZoomRange: true});
        }
    }
}
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы