Добрый день!
Подскажите: на карте яндекса в балун вывести "Заголовок (кликабельный)", "изображение страницы" и "описание" со страницы (wordpress)
Нажал на балун, там информация с картинкой и после нажатия на заголовок (или ссылку "подробнее") открывается страница.
просто вставляя ссылки норм все работает.. (по примеру с яндекса) но хотелось автоматизировать так сказать.. тип по ID страницы чтобы открывал
Один балун = одна страница (строительный объект)
В примере ниже я так понял есть ID и IDX они соответствуют ссылке на страницу на сайте (к примеру: в JSON ("properties":{"idx":"C2167","id":"2167","section":"16"}) то и ссылка /guide/sights/arkhitektura-/penza/
2167)
реально ли это вообще?)
<script type="text/javascript">
var myMap;
var lines;
var multiRoute;
ymaps.ready(function () {
myMap = new ymaps.Map('shop_map', {
center: [55.434042, 37.521041],
controls: [],
zoom: 14
}, {
});
var MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="label__infoBlock popover">' +
'<div class="label__infoInner">' +
'$[[options.contentLayout observeSize minWidth=280 maxWidth=280 minHeight=488]]' +
'</div>' +
'<div class="labelFlag"></div>' +
'<div class="labelClose close"></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();
setTimeout(function(){
$(".labelText").mCustomScrollbar({
theme:"dark",
});
}, 2000);
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 - 110),
top: -(this._$element[0].offsetHeight + this._$element.find('.labelFlag')[0].offsetHeight)
});
console.log (this._$element[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('.labelFlag')[0].offsetHeight
]
]));
},
/**
* Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
* @function
* @private
* @name _isElement
* @param {jQuery} [element] Элемент.
* @returns {Boolean} Флаг наличия.
*/
_isElement: function (element) {
return element && element[0] && element.find('.labelFlag')[0];
}
});
var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass( '$[properties.balloonContent]' );
ymaps.layout.storage.add('my#layout', MyBalloonLayout);
ymaps.layout.storage.add('my#baloonlayout', MyBalloonContentLayout);
jQuery.getJSON('/mapx/test.json', function (json) {
myMap.myObjects = ymaps.geoQuery(json).addToMap(myMap);
myMap.myObjects.each(function(pm) {
//console.log(pm.geometry.getCoordinates());
//pm.setOptions({'preset', 'islands#redIcon'});
//pm.options.set("visible", true);
//console.log(pm.properties.get("section"));
});
myMap.geoObjects.events.add('click', function (e) {
var object = e.get('target');
var idx = object.properties.get('id');
if(idx){
//object.properties.balloonContent = "yyyy";
//object.balloon.open();
object.properties.set(
'balloonContent',
'Загрузка ...'
);
for(var property in obj) {
alert(property + "=" + obj[property]);
}
$.ajax("/mapx/test.json", { name })
.done(function(data) {
object.properties.set(
'balloonContent',
data
);
});
}
//console.log ( object.geometry.getCoordinates() );
});
});
Простой