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

Question

[Олег]

Добрый день! Помогите пожалуйста с правильным отображением точек на яндекс карте. Есть модалка выбора региона - первый уровень просто список городов, заходишь в город проваливаешься в список адресов этого города. Соответственно точки на карте должны отображаться в соответствии в каком ты сейчас городе. 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});
        }
    }
}

Comments

[Олег]

<div class="modal default-select-region-modal_new" id="default-select-region-modal" tabindex="-1" role="dialog" data-curr-region={{current_region.id}}>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-content-wrapper">
        <div class="modal-header">
          <div class="modal-header__block">
              <h5 class="modal-title" id="exampleModalLongTitle">
              {{'site_templates.default.dialogs.select_region.select_city' | ft}}</h5>
              <span class="modal-subtitle" id="exampleModalLongTitle">
                {{'site_templates.default.dialogs.select_region.select_city_list' | ft}}</span>  
            </div>  
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="modal-region__inner">
            <div id="map_new" style="display: none;"></div>
            <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
            <ul class="modal-region-cities">
              {% for list_region in regions %}
                    {% assign region_lat = list_region.latitude %}
                    {% assign region_lng = list_region.longitude %}
                    <li class="modal-region-cities__item"
                      data-name="{{list_region.name}}"
                      >
                      <div class="modal-region-cities__title">{{list_region.name}}</div>      
                      <a href="#" class="{% if current_region.id == list_region.id %}active{% endif %} modal-region-cities__btn"></a>
                  <ul class="modal-region-cities-address">
                    {% for delivery_point in list_region.delivery_points %}
                      
                        {% assign link_href = "?current_delivery_point_id=" | append: delivery_point.id %}
                        {% assign point_lat = delivery_point.lat %}
                        {% assign point_lng = delivery_point.lng %}
                        <li class="modal-region-cities-address__item"
                          data-region-item
                          data-objectID="{{delivery_point.id}}"
                          {% if point_lat != null and point_lng != null and point_lat != '' and point_lng != '' %}
                            {% assign is_delivery_point = true %}
                            data-cord="{{point_lat}},{{point_lng}}"
                          {% endif %}
                          {% if delivery_point.address != '' %}
                            data-address="{{delivery_point.address}}"
                          {% endif %}
                          {% if delivery_point.phone != '' %}
                            data-phone="{{delivery_point.phone}}"
                          {% endif %}
                          {% if delivery_point.work != '' %}
                            data-work="{{delivery_point.work_mode}}"
                          {% endif %}>
                          <div class="modal-region-cities__block">
                            <div class="modal-region-cities__address">{{delivery_point.address}}</div>
                            <div class="modal-region-cities__phone">{{delivery_point.phone}}</div>
                            <div class="modal-region-cities__mode">{{delivery_point.work_mode}}</div>
                          </div>    
                          <a href="{{ link_href }}" class="delivery-item {% if current_delivery_point.id == delivery_point.id %}active{% endif %} modal-region-cities-address__btn"></a>
                          <div class="modal-region__check">
                            <input type="checkbox" onclick="location.href = '{{ link_href }}'" {% if current_delivery_point.id == delivery_point.id %}checked{% endif %}>
                            <label></label>
                          </div>
                        </li>
                    {% endfor %}
                    <a href="#" class="modal-region__btn">Выбрать другой город</a>
                  </ul>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
  </div>
</div>

{% if site_config.enable_delivery_point_select %}
  {% if current_customer %}
    <script type="text/javascript">
      $(document).ready(function (event) {
        $('.rmc-choice-city-link').on('click', function(e){
          e.preventDefault();
          $('#default-select-region-modal').modal('show');
        })
      });
    </script>
  {% endif %}

  {% unless current_delivery_point %}
    {% assign cookie_current_delivery_point_id = 'current_delivery_point_id' | cookie_by_code %}
    {% unless cookie_current_delivery_point_id %}
      <script type="text/javascript">
        $(document).ready(function (event) {
          $('#default-select-region-modal').modal('show');
        });
      </script>
    {% endunless %}
  {% endunless %}
{% endif %}