Вітаю всіх!
У цій статті мова піде про створення невеликого додатки, що працює з картами google.
Ідея наступна. У вас в базі даних є якась інформація про об'єкти, які потрібно показати на мапі (наприклад, інформація про міста). потрібно:
- 1) вивести список цих об'єктів;
- 2) при кліці на будь-якому з об'єктів перемістити карту так щоб обраний об'єкт виявився в її центрі;
- 3) показати на мапі розгорнуту інформацію про вибраний об'єкт.
Взагалі-то існує кілька готових рішень. В основному плагінів для різних CMS. Але часто підключення таких плагінів до існуючої системи займає більше часу, ніж написання власного рішення. Крім того, своє рішення простіше допрацьовувати і підтримувати.
Переходимо до реалізації.
Подивитися на результат можна на демонстраційної сторінці
А скачати код - на GitHub'е .
1) Джерело даних
Щоб не ускладнювати приклад, будемо вважати, що дані отримані з бази, перетворені в JSON формат, і ми можемо отримати їх за допомогою GET запиту. Наприклад, запит
GET /data.json HTTP / 1.1
Повинен повернути нам
[{ "City": "Київ", "lat": 50.5, "lng": 30.5, "desc": "столиця України"}, ...]2) Створюємо сторінку з картою
<! DOCTYPE HTML> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title> Позиціонування Google Maps </ title> <link rel = "stylesheet" href = "styles. css "> </ head> <body> <header> Google maps: позиціонування </ header> <div class =" content "> <div id =" cities "> </ div> <div id =" map "> < / div> </ div> <footer> <a href="https://www.simplecoding.org/"> simplecoding.org </a> </ footer> <script src = "// maps.googleapis.com / maps / api / js? sensor = false "> </ script> <script src =" // ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "> </ script> <script src = "main.js"> </ script> </ body> </ html>На сторінці розміщені два блоки id = "cities" (для списку міст) і id = "map" (для карти). Підключені Google Maps, jQuery і скрипт main.js.
3) JavaScript код (main.js)
Тут виконується основна частина роботи.
$ (Function () {var map; var infoBox = new google.maps.InfoWindow (); var mapContainer = $ ( '# map'); mapContainer.width ('70% '). Height (500); function initialize ( ) {var mapOptions = {center: new google.maps.LatLng (50.5, 30.5), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map (document.getElementById ( "map "), mapOptions);} initialize (); $ .getJSON ( 'data.json', function (data) {if (data.length> 0) {var list = $ ( '<ul>'); $ .each (data, function (index, city) {var item = $ ( '<li>') .on ( 'click', city, showCity) .html (city.city); list.append (item);}); $ ( '# cities'). html (list);}}); function showCity (event) {var coords = new google.maps.LatLng (event.data.lat, event.data.lng); infoBox.setContent ( event.data.city + '-' + event.data.desc); infoBox.setPosition (coords); infoBox.open (map); map.setCenter (coords);}});Перш за все, створюємо напис з інформацією про місто (InfoWindow) і встановлюємо розмір для контейнера карти (рядки 2-5).
Потім инициализируем карту (функція initialize, рядки 7-16). Цей код стандартний і взятий з офіційної документації . Ми вказуємо координати центру, наближення, тип карти і створюємо об'єкт google.maps.Map. У цей момент виконується отрисовка карти.
Тепер необхідно отримати дані і сформувати список міст.
Для цього відправляємо AJAX-запит за допомогою методу $ .getJSON (рядки 18-29). Зверніть увагу, що jQuery автоматично перетворює відповідь сервера в JSON формат. Тобто параметр data містить масив з даними, а не рядок.
Оброблювач відповіді перевіряє кількість елементів в масиві (міст) і якщо воно більше нуля формує список. При цьому кожному елементу li призначається обробник події onclick. Розглянемо цю частину трохи докладніше
$ ( '<Li>'). On ( 'click', city, showCity)Метод on дозволяє приєднати обробник події до будь-якого об'єкта jQuery. У першому параметрі ми вказуємо тип події, в даному випадку це клік мишкою. У другому - об'єкт з інформацією про місто, який буде доступний оброблювачу в момент кліка. У третьому - ім'я функції-обробника, яка буде викликана при виникненні події.
Сформований список показуємо на сторінці (рядок 27).
Тепер розглянемо функцію showCity (рядки 31-37).
Вона викликається при кліці по назві міста. Дані про місто передаються в параметрі event.data.
Оскільки координати, назву і опис міста у нас є, то залишається тільки позиціонувати карту і показати InfoWindow. Для цього:
- 1) Створюємо об'єкт google.maps.LatLng з координатами міста. Він потрібен для позиціонування і карти і InfoWindow.
- 2) Формуємо текст, який потрібно показати в InfoWindow (рядок 33).
- 3) За допомогою методів setPosition і open позиціонуємо і відображаємо InfoWindow на карті.
- 4) Використовуємо метод setCenter для позиціонування карти.
висновок
Як бачите, весь код займає близько 40 рядків. При цьому велика частина - робота з API Google Maps, який добре документований. І при цьому можна з мінімальними зусиллями змінити код так, щоб він відповідав практично будь-якого формату даних, які зберігаються в базі.
Успіхів! І з наступаючими святами!
Com / maps / api / js?