Answer the question
In order to leave comments, you need to log in
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="#">×</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 questionAsk a Question
731 491 924 answers to any question