@kroolla

Как вывести данные из JSON?

Добрый день!

Подскажите: на карте яндекса в балун вывести "Заголовок (кликабельный)", "изображение страницы" и "описание" со страницы (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() );
										
		});	
									
		
    });
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
artzolin
@artzolin
php, WordPress разработка сайтов zolin.digital
Вам нужно собрать данные всех объектов в формате json

$mask = array();
$mask['type'] = 'FeatureCollection';

foreach ( $variable as $key => $value ) {
  $mask['features'][] = array(
    "type" => 'Feature',
    "id"=> $key,
    "geometry" => array (
      "type" => 'Point',
      "coordinates" => [(float) $value->lat, (float) $value->long],
    ),
    "properties" => array (
      "balloonContentBody" => "<strong class='map-title'><a class='link' href='" . $value->post_link . "'>" . $value->post_title . "</a></strong>",
      "balloonContentFooter" => "<a class='hidden' href='#'>Я был здесь!</a>",
      "clusterCaption" => "<strong>" . $value->post_title . "</strong>",
      "hintContent" => "<strong>" . $value->post_title . "</strong>"
    )
  );
}


Теперь json_encode( $mask ) передать в обработчик как в этом примере https://yandex.ru/dev/maps/jsbox/2.1/object_manager/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект