Клуб API Карт

Цвета полигона и отображение балуна

artem.marckin2017
9 декабря 2016, 13:07

Добрый день. Мучаюсь со своей картой ((( Но я пока только учусь, так что не сильно забивайте камнями )))

В общем вопросы:
1.  Прописываю <div>, но он почему-то не задается, может что-то не так? Теги h2 и p тоже не видит. Если в MYCollection.options.set задаю

balloonContentHeader: 'Заголовок',
balloonContentFooter: 'Подвал'

он их тоже не видит. Что-то где-то накосячил, но где не пойму ((

2.  Как правильно прописать цвета полигона, в зависимости  от properties.статуса? Написал, но  как-то не то...

MYCollection.options.set({
if ($[properties.status] == 'Оплачено' ){
this.options.set({
fillColor: '#333'
});

}else {
this.options.set({
fillColor: '#fff'
});
}

});

ymaps.ready(init);

function init () {

    var MYMap = new ymaps.Map("YMapsID", {
            center: [60.18196329668826,30.364867863283404],
            zoom: 17,
            behaviors: ['default', 'scrollZoom'] // скроллинг колесом
        }),

// Общий многоугольник для всех полигонов, будет в виде картинки
        BigPoligon = new ymaps.Polygon(
            [[[... координаты ...]]],
            {name: 'Общий фон' },
        { fillImageHref:'img/MY.png', zIndex:1, strokeWidth:0, zIndexHover:1});


    MY1 = new ymaps.Polygon(
            [[[... координаты ...]]],
        { price: 10000, area: 25 , status: 'Купить' ,name: '№ 1' });

    MY2 = new ymaps.Polygon(
            [[[... координаты ...]]],
        {price: 40000, area: 25 , status: 'Купить' ,name: '№ 2' });

    MY3 = new ymaps.Polygon(
            [[[... координаты ...]]],
        {price: 10000,  area: 25 , status: 'Оплачено' ,name: '№ 3'});


// Создаем коллекцию, в которую будем добавлять метки
    MYCollection = new ymaps.GeoObjectCollection();

//Добавляем метки в коллекцию геообъектов.
    MYCollection
        .add(MY1)
        .add(MY2)
        .add(MY3);

// Шаблон для отображения контента балуна

    var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="myBallon"> <h3>  $[properties.name]  </h3> </div>' +
        '<p><strong>Площадь:</strong>  $[properties.area]  соток</p>' +
        '<p><strong>Цена:</strong>  $[properties.price] рублей</p> '+
        '<p><strong>Статус:</strong>  $[properties.status] </p> '
    );

//  хранилище шаблонов.
    ymaps.layout.storage.add('my#poligonlayout', myBalloonLayout);

// Задаем шаблон для балунов геобъектов коллекции.
    MYCollection.options.set({
        balloonContentBodyLayout:'my#poligonlayout',
        strokeWidth: 0,
        opacity: 0.9,
        zIndexHover:20,
        zIndex:20
    });


//  цвета полигона от статуса

MYCollection.options.set({
if ($[properties.status] == 'Оплачено' ){
this.options.set({
fillColor: '#333'
});

}else {
this.options.set({
fillColor: '#fff'
});
}

});


// Добавляем коллекцию геообъектов на карту.
    MYMap.geoObjects.add(MYCollection);
    MYMap.geoObjects.add( BigPoligon);
}