', { /** * Строит экземпляр макета на основе шаблона и добавляет его в родительский 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 = $('.map-balloon-layout', 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( '' + '' ); addPoint('55.177298', '61.387947', '1', 1, 'Челябинск', 'пр-т Свердловский, дом 39', 'Пн-Пт 10:00-18:00, Сб-Вс 12:00-20:00', '', '', 1, '//ikedservice.ru/contacts?set_city=63'); addPoint('58.018312', '56.251524', '7', 0, 'Пермь', 'ул. Советская, 3', 'Пн-Пт 10:00-18:00, Сб-Вс 12:00-18:00, Чт-Вых', '', '', 2, '//perm.ikedservice.ru/contacts'); addPoint('54.192906', '45.183300', '16', 0, 'Саранск', 'ул. Большевистская, 85', 'Пн-Ср 11:00-19:00, Пт 15:00-19:00, Сб 11:00-15:00', '', '', 3, '//saransk.ikedservice.ru/contacts'); myMap.events.add('sizechange', function() { myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}); }); myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange: true}).then(function() { mapLoad = true; }); }); function setPoint(id) { showMapPoint(id, true); } function addPoint(lat, long, id, sel, name, address, time, note, price, num, linkout) { var myPlacemark = new ymaps.Placemark([lat, long],{ id: 'myplace', class: 'id-'+id, key: id, sel: sel ? 'sel' : '', //iconContent: num, //id*1+1, balloonHeader: '', balloonContent: ' ', }, { id: 'myplace', draggable: false, preset: sel ? 'islands#redIcon' : 'twirl#blueIcon', zIndex: sel ? 1 : 0, balloonLayout: MyBalloonLayout, balloonContentLayout: MyBalloonContentLayout, }); myMap.geoObjects.add(myPlacemark); }