Google Maps: виділення областей на карті
Про сервісах Google Maps і Яндекс мапи чули, напевно, практично всі користувачі інтернету. Але якщо для рядового користувача їх можливості обмежуються стандартним інтерфейсом, то для розробників все набагато цікавіше.
Обидва сервіси надають API, який дозволяє отримати додаткову інформацію, змінити зовнішній вигляд і роботу карт.
Сьогодні я хочу показати невеличкий приклад, що дозволяє відвідувачеві виділити область на карті (використовуватися будуть Google Maps). Надалі, цю область можна зберегти в базі даних вашого сайту.
Перш за все, сформулюємо завдання.
Відвідувачу потрібно якимось чином вказати яку область він хоче виділити. На мій погляд, для цих цілей зручно використовувати багатокутники та кола. Перші дозволяють точніше виділити потрібну область, другі - вимагають менше дій від користувача (досить вказати центр і поставити радіус).
Оскільки для обох випадків API практично однаковий, розглянемо варіант з окружністю.
Отже, принцип роботи буде наступний.
1) Відвідувач клацає по довільній точці на карті, ми ставимо на неї маркер (щоб зручніше було орієнтуватися) і вважаємо її центром області.
2) Відвідувач клацає по будь-якій точці на кордоні області. Ми розраховуємо відстань від неї до центру (радіус) і будуємо коло.
Якщо відвідувач захоче змінити область, то йому буде досить знову зробити два кліка. Ми прибираємо стару окружність і будуємо нову.
Поекспериментувати з цим прикладом можна на демонстраційній сторінці або, якщо хочете, качайте архів з вихідними файлами.
SourceПереходимо до реалізації.
Перш за все, створимо сторінку з картою.
<! DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title> Кола на Google Maps </ title> </ head> <body> <div id = "my_map" style = " width: 600px; height: 400px "> </ div> <script src =" main.js "> </ script> </ body> </ html>Тут все гранично просто. Створюємо блок для карти (my_map), вказуємо його розміри (600х400 px) і підключаємо файл зі скриптами (main. js ), Які будуть виконувати всю роботу.
Розглянемо докладніше main.js.
В першу чергу нам потрібно підключити карту.
var map, circle, circleOptions, setCenter, marker; function initialize () {var myLatlng = new google.maps.LatLng (50.45127, 30.523368); // Kiev var myOptions = {zoom: 9, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID} map = new google.maps.Map (document.getElementById ( "my_map"), myOptions); } Function loadScript () {var script = document.createElement ( "script"); script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; document.body.appendChild (script); } Window.onload = loadScript;Працює цей код наступним чином. При виникненні події window.onload (завершено завантаження сторінки) буде викликана функція loadScript, яка додасть в кінець сторінки тег script, що включає Google Maps.
Зверніть увагу на GET параметр callback. У ньому передається назва функції (initialize), яка буде викликана відразу після завантаження скрипта.
У цій функції (initialize) ми вказуємо налаштування (координати центру, наближення, тип карти) і створюємо карту (рядок 10).
В результаті всередині блоку my_map з'явиться звичайна карта Google.
Переходимо до створення кола.
Перш за все, трохи теорії.
З точки зору API Google Maps, окружність (також як і багатокутник) є оверлеєм (overlay). Для її створення використовується клас google.maps.Circle , А однозначно задати її розміщення можна за допомогою центральної точки - center (об'єкт типу LatLng в якому зберігається широта і довгота) і радіусу - radius (в метрах).
Крім того, в більшості випадків бажано вказати колір кола, її заливку і прозорість. Параметри - fillColor, fillOpacity, strokeColor і strokeOpacity.
У нашому випадку відвідувач будує коло за допомогою кліків по карті, значить, потрібно встановити обробник події click і в ньому виконувати настройку і створення кола.
Обробник події click отримає параметр event, який містить координати точки, через яку клікнув відвідувач.
Після другого кліка ми отримаємо координати другої точки і зможемо розрахувати відстань між ними, тобто радіус кола.
Тепер погляньте на код.
function initialize () {...... setCenter = true; circleOptions = {fillColor: "# 00AAFF", fillOpacity: 0.5, strokeColor: "# FFAA00", strokeOpacity: 0.8, strokeWeight: 2, clickable: false} google.maps.event.addListener (map, 'click', function (event ) {if (setCenter) {if (marker! = undefined) {marker.setMap (null);} marker = new google.maps.Marker ({position: event.latLng, clickable: false}); marker.setMap (map ); circleOptions.center = event.latLng; setCenter = false;} else {// розраховуємо відстань між точками var radius = distHaversine (circleOptions.center, event.latLng) circleOptions.radius = radius * 1000; if (circle! = undefined ) {circle.setMap (null);} circle = new google.maps.Circle (circleOptions); circle.setMap (map); setCenter = true;}}); }Нам потрібно відрізнити перший клік від другого. Для цього використовуємо змінну setCenter. Якщо вона дорівнює true, то в даний момент виконується установка центру кола.
В змінної circleOptions зберігаємо хеш з початковими настройками окружності (колір, прозорість і т.п.).
Після цього встановлюємо оброблювач події click (рядок 14).
Логіка роботи тут наступна. Якщо setCenter == true (установка центру кола), то ми прибираємо старий маркер (рядки 16-18) і створюємо новий в зазначеній точці (рядки 19-23).
Потім, зберігаємо центр кола (параметр circleOptions.center) і присвоюємо setCenter значення false (тобто запам'ятовуємо, що наступний клік по карті вкаже радіус кола).
Після другого кліка ми розраховуємо відстань (функція distHaversine, про неї трохи нижче) і встановлюємо параметр circleOptions.radius.
Потім прибираємо стару окружність (якщо вона є) і створюємо нову (рядки 31-35).
В результаті на карті з'явиться нова окружність.
Зверніть увагу, що змінні map, circle, circleOptions, setCenter і marker оголошені в глобальному контексті. Це необхідно, щоб їх значення зберігалися між викликами обробників подій.
Тепер розберемо функцію розрахунку відстаней між точками.
rad = function (x) {return x * Math.PI / 180;} distHaversine = function (p1, p2) {var R = 6371; // earth's mean radius in km var dLat = rad (p2.lat () - p1.lat ()); var dLong = rad (p2.lng () - p1.lng ()); var a = Math.sin (dLat / 2) * Math.sin (dLat / 2) + Math.cos (rad (p1.lat ())) * Math.cos (rad (p2.lat ())) * Math .sin (dLong / 2) * Math.sin (dLong / 2); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1-a)); var d = R * c; return d.toFixed (3); }Це реалізація формули гавернсінусов на JavaScript. Взяв я її тут . Формула дозволяє визначити відстань між двома точками на поверхні сфери (довжину дуги).
Якщо вас цікавить ця тема, почитайте статтю Обчислення відстані і початкового азимуту між двома точками на сфері .
У нашому випадку зручно, що наведена функція правильно працює з об'єктом LatLng .
І на закінчення, пару зауважень про зберігання даних.
Після кліків відвідувача координати області будуть знаходитися в об'єкті circleOptions. Їх можна передати на сервер, наприклад, за допомогою AJAX запиту. Таким чином, при повторному вході користувача на сайт, можна буде відновити область.
Взагалі, застосувань цих можливостей маса, головне творчо підійти до їх використання 😉
Успіхів!
цікаво почитати
Муляжі страв - реклама кафе , Яка вбиває наповал.
Com/maps/api/js?