Javascript

Свои метка и балун при использовании Яндекс карты

В верстке в том месте, где должна быть выведена карта вставляем div с id "map":

<div id="map"></div>

Также необходимо подключить API Яндекса:

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

не забыв подключить и jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Далее для вывода карты с использованием своей метки и своего балуна, то есть такого балуна, где будет показываться необходимая информация любого вида, нужно использовать следующий скрипт:

var myMap;
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
   myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
      center: [55.68267782261003,37.48201731640626],
      zoom: 10,
      controls: []
   });

// Создание макета балуна
   MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
      ' <div class="popover top">' +
      ' <a class="close" href="#">× </a>' +
       ' <div class="arrow"> </div>' +
       ' <div class="popover-inner">' +
       '$[[options.contentLayout observeSize minWidth=235 maxWidth=1200 maxHeight=350]]' +
       ' </div>' +
      ' </div>', {
/**
* Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
* @function
* @name build
*/
      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.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear
* @function
* @name clear
*/
       clear: function () {
         this._$element.find('.close')
            .off('click');
         this.constructor.superclass.clear.call(this);
      },

/**
* Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
* @function
* @name onSublayoutSizeChange
*/
      onSublayoutSizeChange: function () {
         MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

         if(!this._isElement(this._$element)) {
             return;
          }
          this.applyElementOffset();
          this.events.fire('shapechange');
       },

/**
* Сдвигаем балун, чтобы середина указывала на точку привязки.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
* @function
* @name applyElementOffset
*/
       applyElementOffset: function () {
          this._$element.css({
             left: -(this._$element[0].offsetWidth / 2),
             top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
          });
       },

/**
* Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
* @function
* @name onCloseClick
*/
       onCloseClick: function (e) {
          e.preventDefault();
          this.events.fire('userclose');
       },

/**
* Используется для автопозиционирования (balloonAutoPan).
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ILayout.xml#getClientBounds
* @function
* @name getClientBounds
* @returns {Number[][]} Координаты левого верхнего и правого нижнего углов шаблона относительно точки привязки.
*/
       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]
          ]));
       },
/**
* Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
* @function
* @private
* @name _isElement
* @param {jQuery} [element] Элемент.
* @returns {Boolean} Флаг наличия.
*/
       _isElement: function (element) {
          return element && element[0] && element.find('.arrow')[0];
       }
    }),

// Создание вложенного макета содержимого балуна.
    MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
       ' <div class="container text-white"><div class="column-md-6">$[properties.balloonHeader] </div>' +
       ' <div class="column-md-6">$[properties.balloonContent] </div> </div>'
    ),
// Создание метки
    myPlacemark = new ymaps.Placemark(
// Координаты метки
       [55.68267782261003,37.48201731640626] , {
// Свойства
// Текст метки
       hintContent: 'iResource',
       balloonHeader: ' <b>174 East 110th Street <br>(between Lexington & Third Aves.), <br>New York, NY 10029-3212 </b> <p>Ut wisi enim ad minim veniam, quis nostrud exerci ullamcorper suscipit lobortis nisl ut aliquip ex. </p>',
       balloonContent: ' <form class="map_form"> <input type="text" placeholder="Your Name"> <input type="text" placeholder="Email Adress"> <textarea placeholder="Your Message"> </textarea> </form>'
    }, {
       iconLayout: 'default#imageWithContent',
// Своё изображение иконки метки.
       iconImageHref: 'js/map_metka.png', // картинка иконки
       iconImageSize: [39, 39], // размеры картинки
       iconImageOffset: [-6, -10], // смещение картинки
       balloonShadow: false,
       balloonLayout: MyBalloonLayout,
       balloonContentLayout: MyBalloonContentLayout,
       balloonPanelMaxMapArea: 0,
// Не скрываем иконку при открытом балуне.
       hideIconOnBalloonOpen: false,
// И дополнительно смещаем балун, для открытия над иконкой.
       balloonOffset: [-100, -230]
    });
// Добавление метки на карту
    myMap.geoObjects.add(myPlacemark);
}

В качестве метки используется изображение js/map_metka.png. За создание подобной метки отвечает кусок кода в самом конце - myPlacemark, имеющий следующие параметры и свойства: координаты, тип иконки, ссылка к изображению, размер, смещение. Затем метка добавляется к карте в качестве геобъекта - myMap.geoObjects.add(myPlacemark);.

В качестве балуна выведена информация, касающаяся адреса, и форма обратной связи. Балун формируется за счет MyBalloonLayout, который определяет его макет, позицию на карте, события происходящие с ним. И в итоге MyBalloonContentLayout создает структуру балуна, куда в качестве свойств передаются параметры balloonHeader и balloonContent, в свою очередь сформированные в myPlacemark, где помимо прочего определены такие параметры балуна как его тень, расположение контента, смещение в случае необходимости.

Немного подробнее в формате видео:


сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей