Клуб API Карт

Найдено на тему «балун-панель»:
как перемещаться по карте при открытом балуне
WebLID
11 августа 2017, 20:08

В яндекс картах размером в 200х200 есть некий балун который имеет ширину такую же как и размер карты 200х200. при открытии болуна по карте невозможно перемещаться. каким образом можно сделать так, чтобы была возможность при открытом балуне, при перемещении в области этого балуна происходило перемещение по  карте. Чтобы вместо этого:

можно былобы сделать так:

балун-панель,карта
Как прикрепить балуны
Удалённый пользователь
6 февраля 2017, 17:47

Вопрос в следующем, как прикрепить к этим меткам балуны, метки идут через FeatureCollection и я не понимаю как сделать к ним балун, пробовал от myPlacemark, но так не работает.

<script type="text/javascript">
 ymaps.ready(init);
        var myMap, 
            myPlacemark;

function init() {
    var myMap = new ymaps.Map('map', {
            center: [55.755826, 37.6173],
            zoom: 10
        
        });
red = new ymaps.Placemark([55.709658441942416, 37.632903415777605], {
            // Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
            balloonContentHeader: "AFI Residence Paveletskaya",
            balloonContentBody: "Cкачать презентацию",
            balloonContentFooter: "Москва, Павелецкая наб., д.8 - 6 ",
            hintContent: "Подробнее"
        });

    myMap.geoObjects.add(red);

    // Функция, которая по состоянию чекбоксов в меню
    // показывает или скрывает геообъекты из выборки.
    function checkState () {
        var shownObjects,
            byColor = new ymaps.GeoQueryResult(),
            byShape = new ymaps.GeoQueryResult();
        
        // Отберем объекты по цвету. 
        if ($('#red').prop('checked')) {
            // Будем искать по двум параметрам:
            // - для точечных объектов по полю preset;
            // - для контурных объектов по цвету заливки.
            byColor = myObjects.search('options.fillColor = "#ff1000"')
                .add(myObjects.search('options.preset = "twirl#redIcon"'));
        }
        if ($('#green').prop('checked')) {
            byColor = myObjects.search('options.fillColor = "#00ff00"')
                .add(myObjects.search('options.preset = "twirl#greenIcon"'))
                // После того, как мы нашли все зеленые объекты, добавим к ним
                // объекты, найденные на предыдущей итерации.
                .add(byColor);
        }
        if ($('#yellow').prop('checked')) {
            byColor = myObjects.search('options.fillColor = "#ffcc00"')
                .add(myObjects.search('options.preset = "twirl#yellowIcon"'))
                .add(byColor);
        }
        // Отберем объекты по форме.
        if ($('#point').prop('checked')) {
            byShape = myObjects.search('geometry.type = "Point"');
        }
        if ($('#polygon').prop('checked')) {
            byShape = myObjects.search('geometry.type = "Polygon"').add(byShape);
        }
        if ($('#circle').prop('checked')) {
            byShape = myObjects.search('geometry.type = "Circle"').add(byShape);
        }
        
        // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
        // которые совмещают нужные признаки.
        shownObjects = byColor.intersect(byShape).addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        myObjects.remove(shownObjects).removeFromMap(myMap);
    }
    
    $('#red').click(checkState);
    $('#green').click(checkState);
    $('#yellow').click(checkState);
    $('#point').click(checkState);
    $('#polygon').click(checkState);
    $('#circle').click(checkState);
    
    // Создадим объекты из их JSON-описания и добавим их на карту.
    window.myObjects = ymaps.geoQuery({
        type: "FeatureCollection",
        features: [
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.895636, 37.462314900000024]
                },
                options: {
                    preset: 'twirl#yellowIcon'
                }
           
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.8104533, 37.64509599999997]
                },
                options: {
                    preset: 'twirl#greenIcon'
                }
             },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.70864899999999, 37.64558490000002]
                },
                options: {
                    preset: 'twirl#greenIcon'
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.84060729999999, 37.49379109999995],
                    radius: 10000
                },
                options: {
                    preset: 'twirl#redIcon'
                }
            }
        ]
    }).addToMap(myMap);
}
var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
</script>

   <form>
 
              
              <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Выбрать фильтр</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="red" >
        <input type="checkbox" id="red" checked=true/>Красные</label>
      <label for="green">
        <input type="checkbox" id="green"checked=true />Зеленые</label>
      <label for="yellow">
        <input type="checkbox" id="yellow"checked=true />Желтые</label>
        <label for="point">
        <input type="checkbox" id="point"checked=true />Все объекты</label>
    </div>
  </div>
</form>

2 комментария
балун-панель,не показывает балун
Не показываются балуны
a@leshkacho.ru
30 октября 2016, 18:16

Здравствуйте, подскажите, пожалуйста, в чем может быть проблема

На сайте использую карту, данные в нее загружаю через objectManager

$( "select.serviceFirst" ).change(function() {
			if ($(this).val()!=''){
				myMap.geoObjects.removeAll();
				curval = $(this).val();
				objectManager = new ymaps.ObjectManager({
		            // Чтобы метки начали кластеризоваться, выставляем опцию.
		            clusterize: false,
		            geoObjectOpenBalloonOnClick: true,
            		clusterOpenBalloonOnClick: true,
		            // ObjectManager принимает те же опции, что и кластеризатор.
		            gridSize: 32
		        });
		        objectManager.objects.options.set('preset', 'islands#greenDotIcon');
			    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
			    myMap.geoObjects.add(objectManager);

			    $.ajax({
			        url: "<?=SITE_TEMPLATE_PATH?>"+"/map_"+curval+".json"
			    }).done(function(data) {
			    	console.log('ok');
			        objectManager.add(data);
			    });
			} else {
				if ($('select#city').val()!=''){
					myMap.geoObjects.removeAll();
					panto($('select#city option:selected').text());
				}
			}
		});

Соотвественно при смене селекта, меняются и метки на карте, но по клику балун не показывается, но подсказка при наведении появляется.

Вот пример json файла

{
	"type":"FeatureCollection",
	"features":[{
		"type":"Feature",
		"id":0,
		"geometry":{
			"type":"Point",
			"coordinates":"44.8350115,65.5009237"
		},
		"properties":{
			"baloonContent":"Bek",
			"clusterCaption":"\u043c\u0435\u0442\u043a\u0430",
			"hintContent":"\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430"
		}
	},
	{
		"type":"Feature",
		"id":1,
		"geometry":{
			"type":"Point",
			"coordinates":"42.8946592,71.3759428"
		},
		"properties":{
			"baloonContent":"\u0421\u0435\u0440\u0433\u0435\u0439",
			"clusterCaption":"\u043c\u0435\u0442\u043a\u0430",
			"hintContent":"\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430"
		}
	}]
}

5 комментариев
яндекс карты api,балун,балун-панель
Балун-панель при использовании метода LoadingObjectManager
Тим В
2 февраля 2016, 21:46

Добрый день, товарищи.

Подскажите как при использовании LoadingObjectManager задать балун в виде панели.

Если можно пример.

  * глупых вопросов не бывает

1 комментарий
балун-панель
Скрытие балуна
vctr78
2 марта 2015, 16:29

Балун-панель, balloonCloseButton:false. Всё ок, но при или большом, или резком зуме балун закрывается. Как можно не допускать такое скрытие?

2 комментария
API 2.1,балун-панель,панель,балун