Кілька своїх стилізованих міток на яндекс карті

Кілька своїх стилізованих міток на яндекс карті

В одній з минулих статей ми розбиралися як працює API яндекс карт на прикладі створення компонента для НетКета, але все це справа відносилося до старого API версії 1.0. У цій статті ми будемо робити те ж саме для Яндекс карти з API 2.0. а саме: додамо кілька міток, зробимо свої ікони замість стандартних міток, повністю змінимо стиль вспливалок (Балунов) і таке інше.

Беремо код і створюємо карту

У версії API 2.Х не треба отримувати ніяких ключів просто встромляємо код і прив'язуємо карту до потрібного диву і все.

Додаємо і стилізуємо мітки

Тут створюємо мітку з потрібними координатами і всякими налаштуваннями.
У разі створення компонентів або модулів зацикливать потрібно саме цю частину.

Кожен такий шматок відповідає за одну кастомную мітку, тому щоб додати кілька міток - повторюємо цей шматок скільки потрібно раз, природно змінюючи назву змінної myPlacemark0 на щось інше.

Кілька своїх стилізованих міток на яндекс карті

Примітки

  • Ось тут є купа класних прикладів по роботі з Яндекс.Карти і один з них був використаний в цій статті.
  • Ось тут теж купа наочних прикладів, варто подивитися.

Ось і все, ми зробили Яндекс карту з декількома унікальними мітками, з власним контентом Балунов, стилем і навіть своєю кнопкою закрити використовуючи API 2.0

UPD: Існує проблема з невірним підрахунком позиції кастомними Балунов, тобто в якихось частинах карти Балун відкривається за межами карти, що не гарно і не ок. Цю проблему я вирішив примусової центровкой карти на координатах відкритого Балунов за допомогою panTo:

1) Спочатку до налаштувань Балунов мітки карти треба додати balloonAutoPan: false - щоб вимкнути автоматичне криве вирівнювання.

2) Тепер при подію balloonopen візьмемо координати мітки і викличемо panTo:

Як це працює можете подивитися в прикладі вище.

Спасибі, подивився! Дещо прояснилося.
І все-таки залишилося незрозумілим, яким чином об'єкти структуруються всередині Балунов. Ось наприклад у Вас картинка зліва в гуртку і з боку напис. Все акуратно! Коли я намагаюся змінити Ваші картинки і текст на свої, у мене все це розташовується як попало! У коді я нічого не змінюю, крім вмісту і джерела. Виникає питання що саме відповідає за розташування тексту щодо картинки!

Всі елементи всередині Балунов, позиціонуються і стилизуются за допомогою CSS, конкретно обтікання картинки зроблено за допомогою властивості float. Уважно подивіться код прикладу, всі стилі там.
І вчіть матчастину.