Клуб API Карт

Как совместить стиль и setIconContent

yagolnik
18 июля 2009, 20:33

Столкнулся с проблемой:

Если прописываю стиль иконки, то setIconContent не работает.

Каким образом задать в стилях иконку для значка, и потом менять в ней содержимое, например, вставлять микро-фотографию?

Если пользоваться стандартным стилем, то он не растягивается по высоте картинки, а только по её ширине или по тексту.Причем текст и картинка должны быть без стилей {position: absolute;}.


Эта тема уже обсуждалась, например здесь:

http://clubs.ya.ru/mapsapi/replies.xml?item_no=3022

Но ответа нигде нет.

Если API не расчитан на совместное использование стилей и setIconContent, то неплохо бы это отразить в документации.


PS: Исправить частично положение можно используя дефолтный стиль (т.е. не определяя своего стиля) и таблицу в setIconContent. Но и тут таблица не должна иметь {position: absolute;}. Главный недостаток - очень большие внутренние границы и стандартной иконки. На маленьких изображениях половину площади съедает сама иконка.

7 комментариев
Подписаться на комментарии к посту
Если Вы меняете стиль для значка метки, то Вам необходимо самим позаботиться о добавлении контента в значок.

Создайте свой шаблон.
В шаблон не внесешь любое содержание. А только то, что можно извлечь из id, name и description. Например, о Flash можно забыть сразу.
API Яндекс.Карт - очень гибкое. Например, Вы можете добавить в прототип Placemark новый метод, который будет задавать контент для значка.

Объявим новый стиль (он самый простой для демонстрации):

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle(
    new YMaps.Template('$[iconContent]')
);

Пусть у нас будет метод setMyIconContent(), который будет задавать содержимое для значка метки. Добавим его в прототип:

YMaps.Placemark.prototype.setMyIconContent = function (content) {
    this.iconContent = content;
    this.update();
}

Важно. Лучше наследовать свой класс от Placemark и к нему добавить новый метод. О наследовании в JavaScript можно почитать здесь.

Далее необходимо создать метку с объявленным стилем, добавить ее на карту и вызвать метод setMyIconContent():

var placemark = new YMaps.Placemark(map.getCenter(), {style: s});
map.addOverlay(placemark);
placemark.setMyIconContent('Содержимое значка метки');
Больное спасибо! Как сделаю - выложу результат.
С удовольствием посмотрим :)
Лучше всего для метки определить свой Layout (макет), тогда можно будет воспользоваться стандартным методом setIconContent (что предпочтительнее). Макеты позволяют видоизменять внешний вид объектов на карте (например, меток или балунов).

function PlacemarkLayout () {
    var element = document.createElement('div');

    this.onAddToParent = function (parent) {
        parent.appendChild(element);
    }
   
    this.onRemoveFromParent = function (parent) {
        parent.removeChild(element);
    }
   
    this.update = function () {}
   
    this.setContent = function (content) {
        content.onAddToParent(element);
    }
}

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle(new YMaps.LayoutTemplate(PlacemarkLayout));

var placemark = new YMaps.Placemark(map.getCenter(), {style: s});
placemark.setIconContent('test');
map.addOverlay(placemark);
только this.onRemoveFromParent = function (parent) { parent.removeChild(element); } заменить на this.onRemoveFromParent = function () { element.parentNode.removeChild(element); }