Клуб API Карт

ObjectManager и кастомные метки

Максим Морозов
20 ноября 2014, 13:04

Добрый день! Интересует вопрос замены меток на свои! Возможно ли это сделать? Как?
Если нет то вычитал в документации такую штуку как - objectManager.objects.getById(0).set('preset', 'islands#blueDotIcon'); 
Но это не работает... подскажите как вообще настроить кастомные метки 

или можно как то с JSON передавать данные том как будет отображаться метка? 

16 комментариев
Подписаться на комментарии к посту

Вам надо задать соответствующие опции как для обычной метки https://tech.yandex.ru/maps/jsbox/2.1/icon_customImage, только с нужными префиксами

Например так

http://jsfiddle.net/api/post/library/pure/

http://jsfiddle.net/q8dj8Lvr/

Максим Морозов
21 ноября 2014, 08:01

Нет, вы меня не так поняли))
Вот у меня поступает в  objectManager данные о точках из JSON и мне надо както сделать так что бы из этого же JSON приходил какой нибудь идентификатор будущей картинки метки....
Ну или приходил какой то дополнительный id по которому мы бы присваивали метки какуюто картинку...второй вариант даже лучше) 

Вот строчка из JSON

    {"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContent": "Содержимое балуна", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}},

Можно туда что то добавить что бы рисовались разные метки?
Т.е. хотя бы чтобы на карте половина меток было

 'preset', 'islands#blueDotIcon'


а другая половина

'preset', 'islands#redDotIcon' 

Вы можете задавать опции каждому конкретному объекту по отдельности

{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContent": "Содержимое балуна", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}, {

    options: {

       preset: 'islands#blueIcon'

    }

}}


2. Можно задать объекту какой-то идентификатор, по которому решается, какой у объекта будет макет

Затем на клиенте ловить событие, например, добавления объекта в коллекцию, и в этот момент на клиенте прописывать объекту нужные опции

objectManager.objects.events.add('add', function (e) {

    var obj = e.get('child');

    if (child.properties.color == 'red') {

        child.options = child.options || {};

        child.options.preset == 'islands#redIcon'; 

    } else {

       ....

    }

});


Можно создать собственный экземпляр объекта ILayout, который рисует метку на карте, внутри него прописать логику, которая выбирает тип отображения и задать этот Layout всей коллекции через опции.

Максим Морозов
21 ноября 2014, 14:10

Спасибо! Буду пробовать!!!

Максим Морозов
21 ноября 2014, 16:42

Ничего не выходит....меня заинтересовал вариант номер 2

Вот пример моего кода:

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {            center: [position.coords.latitude, position.coords.longitude ],            zoom: 15,                     controls: ['zoomControl']        }),   objectManager = new ymaps.ObjectManager({            clusterize: true,            gridSize: 32        });    objectManager.objects.options.set( {        iconLayout: 'default#image',        iconImageHref: '1a.png',        iconImageSize: [30, 42],        iconImageOffset: [-3, -42]    });objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');var obj = e.get('color');    if (child.properties.color == 'green') {        child.options = child.options || {};        child.options.preset == 'islands#greenIcon';     }});myMap.geoObjects.add(objectManager);objectManager.objects.events.add('add', function (e) {    $.ajax({        url: "users.php"    }).done(function(data) {        objectManager.add(data);    });});

 А вот пример вывода из JSON строки

////PHP {"type": "Feature", "id": "", "color": "green", "geometry": {"type": "Point", "coordinates": [, ]}, "properties": {"balloonContent": "", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}},

 
Что я сделал не правильно?....понять не могу 

 

В вашем коде действительно нет смысла, попробуйте выстроить логику своей программы. Сейчас оно выглядит как случайный набор строк)

Максим Морозов
21 ноября 2014, 17:07

Ну приступим)))

 Подключаем карты и находим центр для отображения

 

    var myMap = new ymaps.Map('map', {            center: [position.coords.latitude, position.coords.longitude ],            zoom: 15,                     controls: ['zoomControl']        }),


Далее начинает работу с ObjectManager

 

  objectManager = new ymaps.ObjectManager({            clusterize: true,            gridSize: 32        });

 

Задаем внешний вид маркера и кластера

objectManager.objects.options.set( {
        iconLayout: 'default#image',        iconImageHref: '1a.png',        iconImageSize: [30, 42],        iconImageOffset: [-3, -42]    });    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');


 Далее через АЯКС вытаскием JSON

           $.ajax({url: "users.php"    }).done(function(data) {        objectManager.add(data);    });

 
Рисуем объекты на карте

myMap.geoObjects.add(objectManager);

 

 

По идеии надо после отрисовки искать событие  add

 

 

objectManager.objects.events.add('add', function (e) {

    var obj = e.get('child');

    if (child.properties.color == 'red') {

        child.options = child.options || {};

        child.options.preset == 'islands#redIcon'; 

    } else {

       ....

    }

});

 


Вот теперь вроде как логика есть...
Тогда понять не могу как надо сформировать JSON строчку 

 

1. На событие надо повеситься до того, как объекты будут добавлены в менеджер

 

2. При формировании JSON нужно прописать поле color

{"type": "Feature", "id": "", "color": "green", "geometry": {"type": "Point", "coordinates": [, ]}, "properties": {"balloonContent": "", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки", "color": }},


что-то типа того

Максим Морозов
21 ноября 2014, 17:30

Скорее всего я туп...но ничего не происходит...в лучшем случае карта отрисовывается но без меток вообще....

    $.ajax({
        url: "users.php"    }).done(function(data) {        objectManager.add(data);    });objectManager.objects.events.add('add', function (e) {    var obj = e.get('color');    if (child.properties.color == 'green') {        child.options = child.options || {};        child.options.preset == 'islands#greenIcon';     } else {      alert('Error');    }});    myMap.geoObjects.add(objectManager);

 
А вот и сам JSON

{
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"id": "макс",
"geometry": {
"type": "Point",
"coordinates": [52.2832093, 76.9818137]
},
"properties": {
"balloonContent": "макс",
"clusterCaption": "Еще одна метка",
"hintContent": "Текст подсказки",
"color": "green"
}
}
]
}

 Понять не могу ничего 

А вы можете смастерить примерчик на jsfiddle? Я тогда смогу его поправить, чтобы заработало

Максим Морозов
21 ноября 2014, 17:55

http://jsfiddle.net/EleGant/8Ltbwhc5/

Сделал..только толи AJAX не проходит...толи картинки не скачивает 

Ага, там в ответе не хватает CORS заголовков. Но не суть, я заменила на статическое добавление данных - вот пример http://jsfiddle.net/EleGant/8Ltbwhc5/

Максим Морозов
21 ноября 2014, 18:05

Вы мне отправили без изменений..:-(

 

jsfiddle умнее меня) вот вроде норм ссылка http://jsfiddle.net/L20tfpLe/

Максим Морозов
21 ноября 2014, 18:53

О ЧУДО!!! Вы сделали это!!! Спасибо громадное ВАМ!!! Я Вас обожаю!!!(love)

ура)