C
C
cheburashkaRF2017-08-31 22:01:46
PHP
cheburashkaRF, 2017-08-31 22:01:46

How to solve the problem of the label disappearing from the Yandex map?

There is a map with many labels, by clicking on which a balloon with information is shown, the problem is that when the balloon is shown, the label itself disappears, tell me how to fix it?

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
ymaps.ready(function () {
      var myMap = new ymaps.Map('map', {
        center: [55.592258, 37.155939],
        zoom: 4,
        behaviors: ["drag","scrollZoom","dblClickZoom", "rightMouseButtonMagnifier", "multiTouch"] ,
        controls:['smallMapDefaultSet']
      }),

      // Создание метки 
      myCollection_MAP_ALL = new ymaps.GeoObjectCollection(),
        // Создание макета балуна на основе Twitter Bootstrap.
        MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
          '<div class="popover top">' +
            '<div class="arrow"></div>' +
            '<div class="popover-inner">' +
              '<a class="close" href="#">&times;</a>' +
              '$' +
            '</div>' +
          '</div>', {
            /*
              * Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
            */
            build: function () {
              this.constructor.superclass.build.call(this);

              this._$element = $('.popover', this.getParentElement());

              this.applyElementOffset();

              this._$element.find('.close')
                .on('click', $.proxy(this.onCloseClick, this));
            },

            /*
              * Удаляет содержимое макета из DOM.
            */
            clear: function () {
              this._$element.find('.close')
                .off('click');

              this.constructor.superclass.clear.call(this);
            },

            /*
              * Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
            */
            onSublayoutSizeChange: function () {
              MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

              if(!this._isElement(this._$element)) {
                return;
              }

              this.applyElementOffset();
              this.events.fire('shapechange');
            },

            /**
            * Сдвигаем балун, чтобы "хвостик" указывал на точку привязки.
            */
            applyElementOffset: function () {
              this._$element.css({
                left: -(this._$element[0].offsetWidth / 2),
                top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
              });
            },

            /*
              * Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
            */
            onCloseClick: function (e) {
              e.preventDefault();
              this.events.fire('userclose');
            },

            /*
              * Используется для автопозиционирования (balloonAutoPan).
            */
            getShape: function () {
              if(!this._isElement(this._$element)) {
                return MyBalloonLayout.superclass.getShape.call(this);
              }

              var position = this._$element.position();

              return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
                [position.left, position.top], [
                  position.left + this._$element[0].offsetWidth,
                  position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
                ]
              ]));
            },

            /*
              * Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
            */
            _isElement: function (element) {
              return element && element[0] && element.find('.arrow')[0];
            }
        }),
        // Создание вложенного макета содержимого балуна.
        MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
          '<h3 class="popover-title">$[properties.balloonHeader]</h3>' +
          '<div class="popover-content">$[properties.balloonContent]</div>'
        );
      <?php
        foreach($date as $k => $v){
          $coords = explode(",", $v[PROPERTY_YANDEX_MAP_VALUE]);
          ?>
          var myPlacemark = new ymaps.Placemark(
            // Координаты метки
            [<?=$coords[0]?>,<?=$coords[1]?>],
            {
              balloonHeader:		`<strong><?=$v["NAME"]?></strong>`,
              balloonContent: 	`
                                <p>
                                    <strong>Телефон:</strong> 
                                    <?=$v["PROPERTY_PHONES_VALUE"]?>
                                </p>
                                <p>
                                    <strong>Режим работы:</strong> 
                                    <?=$v["PROPERTY_WORK_HOURS_VALUE"]?>
                                </p>
                                <p>
                                    <strong>Адрес:</strong> 
                                    <?=$v["PROPERTY_ADRESS_VALUE"]?>
                                </p> 
              `
            }, {
              balloonShadow: false,
              balloonLayout: MyBalloonLayout,
              balloonContentLayout: MyBalloonContentLayout,
              balloonPanelMaxMapArea: 0
            }
          );
          myCollection_MAP_ALL.add(myPlacemark);

          <?
        }
      ?>

      // Добавление метки на карту
      myMap.geoObjects.add(myCollection_MAP_ALL);
      myMap.behaviors.enable('drag');

    })

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question