Клуб API Карт

Как прикрепить балуны

ozirist
6 февраля, 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>