Полігони та лінії Google Maps API v3, JavaScript
Полігони та лінії в Google Maps API v3
Сьогодні ми побачимо як малювати полігони та лінії на картах Google Maps. Полігони знадобляться у разі, якщо вам необхідно обвести область чи якийсь об'єкт, а лінії – щоб намалювати шлях чи щось подібне.
У цій статті полігони та лінії будуть малюватись за допомогою SVG. Їх (як і всі інші об'єкти-оверлеї) можна також відображати за допомогою KML, але про нього ми поговоримо в одній з наступних статей.
Ініціалізація картки
Google Map API третьої версії має істотні зміни. Наприклад, ключ для домену більше не потрібний. Плюс дещо змінився синтаксис. Давайте подивимося, як викликати карту:
Дивимося простий приклад:
Відображення
На лінію можна повісити обробку події за допомогою addListener. Наприклад, щоб відстежити клік по лінії треба зробити так:
Тепер давайте подивимося на приклад, де виводитися лінія і при натисканні на неї щось відбувається:
Відображення
Полігон це замкнуті лінії (координати початку першої дорівнюють координатам кінця останньої). Усередині полігон можна залити кольором.
Для відображення полігону необхідна знову ж таки карта, набір координат у вигляді масиву LatLng та налаштування для обведення та заливання. Приблизно так:
На полігон також можна повісити обробник події. Код нічим не відрізняється від події для лінії:
Знову ж таки, приклад полігону та обробника події:
Підводні камені
Зважаючи на те, що кожен відрізок лінії або грань полігону є елементом DOM, зі збільшенням їх кількості зменшується швидкість їх обробки браузерами. Зокрема, у наступній статті я наведу посилання на проект, у якому я використовував такі полігони для виділення країн.Коли на карті побільшало 10 країн, мій браузер почав безбожно виснути.
Вирішити це можна за допомогою KML для Google Maps API. Але про це у наступній статті.
Автор: Павло Марковнін
Співзасновник Тимчасово. Цікавиться онлайн бізнесом, дизайном, юзабіліті та клієнтським програмуванням. Бере участь у розробці кількох інтернет-проектів.
Іноді пише в Твіттер, але частіше на Тимчасово.
Розкажіть друзям
Коментарі — 7
швидше навпаки: - швидкість зменшується або - час збільшується
напевно, все це є десь на http://code.google.com/intl/ua/apis/maps/documentation/javascript/overlays.html
ось тут є багато цікавих прикладів: http://code.google.com/intl/ru/apis/maps/documentation/javascript/examples/index.html
Ось тут галерея проектів (теж багато цікавого): http://code.google.com/intl/ru/apis/maps/documentation/javascript/demogallery.html
Ось тут статті (іноземною мовою): http://code.google.com/intl/ru/apis/maps/documentation/javascript/articles.html