Як показати на Google Maps об'єкти, що знаходяться в заданій області
Показати приклад вирішення такого завдання мене попросили в коментарях до однієї з попередніх статей про Google Maps. З виконанням цього прохання я досить сильно затягнув, але, сподіваюся, ця стаття комусь стане в нагоді 🙂
Почнемо з постановки задачі
Припустимо, у нас є дані про групу об'єктів (їх назви і координати). Необхідно відзначити їх на карті за допомогою маркерів. При цьому, показати потрібно не всі об'єкти, а тільки ті, які знаходяться всередині заданої області.
Таким чином, алгоритм розстановки об'єктів виходить досить простим.
1) Читаємо координати об'єкта з KML файлу.
2) Розраховуємо відстанню між центром окружності і поточним об'єктом.
3) Якщо це відстань менше радіуса кола, ставимо маркер, якщо більше - пропускаємо об'єкт.
Переходимо до вирішення.
Подивитися, як працює цей приклад, можна на демонстраційній сторінці або встановивши скрипти на своєму сервері.
Sourceсерверна частина
Почнемо з серверного скрипта, який формує сторінку з картою (index. php ).
<? Php $ organizations = simplexml_load_file ( 'doc.kml'); $ Organizations_data = array (); foreach ($ organizations-> Folder-> Placemark as $ organisation) {$ organizations_data [] = array ( 'name' => (string) $ organisation-> name, 'coordinates' => (string) $ organisation-> Point- > coordinates,); }?> <! DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title> Об'єкти на Google Maps </ title> <script> <? Php echo 'var organizations =' .json_encode ($ organizations_data). ';'; ?> </ Script> </ head> <body> <h1> Google Maps: відображення об'єктів, які знаходяться в заданій області </ h1> <div id = "my_map" style = "width: 600px; height: 400px"> </ div> <script src = "main.js"> </ script> </ body> </ html>Перш за все, завантажуємо дані з KML файлу (рядок 2). Оскільки це звичайний XML файл, то ми можемо використовувати будь-яку бібліотеку для роботи з цим форматом. В даному випадку - SimpleXML .
Потім, необхідно забезпечити доступ до цих даних на стороні клієнта, тому що настройка Google Maps виконується за допомогою JavaScript .
Для цього ми формуємо масив з необхідними даними (рядки 6-11), перетворюємо його в JSON формат (рядок 22) і присвоюємо змінної organizations (рядок 22) в тезі script. Таким чином, ми отримуємо JavaScript масив з координатами всіх об'єктів з KML файлу.
Тут я хочу зробити невеличкий відступ. В принципі, працювати з KML файлом можна і на стороні браузера, це нескладно. Але в загальному випадку, цей файл не обов'язково буде знаходитися на вашому сервері, а крос-доменні (XSS) запити заборонені політикою безпеки браузерів. Тобто доведеться шукати який-небудь обхідний шлях. Детальніше на цю тему можна почитати тут , тут , тут і тут .
Детально розбирати роботу з SimpleXML, думаю, сенсу не має. Для даного прикладу досить розуміти, що після завантаження файлу ви отримаєте об'єкт, який має таку ж структуру як і xml-документ.
Тобто виклик $ organizations-> Folder-> Placemark поверне вам вміст тега <Placemark> в документі з такою структурою
<Kml xmlns = "..." xmlns: kml = "..." xmlns: atom = "..."> <Folder> <Placemark> ... </ Placemark> </ Folder> </ kml>Зверніть увагу! Бібліотека чутлива до регістру тегів в xml-файлі.
На самій сторінці ми створюємо блок для карти (my_map).
І підключаємо файл main.js, який і буде виконувати настройку карти.
клієнтська частина
Відразу подивимося на весь скрипт цілком.
var map, circle, circleOptions, setCenter, marker, organizations_markers; function initialize () {var centerPoint = new google.maps.LatLng (48.67, 44.47); // Волгоград var myOptions = {zoom: 12, center: centerPoint, mapTypeId: google.maps.MapTypeId.HYBRID} map = new google.maps.Map (document.getElementById ( "my_map"), myOptions); // радіус кола - 5 км var radius = 5; circleOptions = {center: centerPoint, fillColor: "# 00AAFF", fillOpacity: 0.5, strokeColor: "# FFAA00", strokeOpacity: 0.8, strokeWeight: 2, clickable: false, radius: radius * 1000} // малюємо коло circle = new google.maps.Circle (circleOptions); circle.setMap (map); // встановлюємо маркери організацій organizations_markers = []; for (var i = 0; i & lt; organizations.length; i ++) {var ll = organizations [i] .coordinates.split ( ','); var latlng = new google.maps.LatLng (ll [1], ll [0]); if (distHaversine (latlng, centerPoint) & lt; radius) {organizations_markers [i] = new google.maps.Marker ({position: latlng, clickable: true}); organizations_markers [i] .setMap (map); }}} Function loadScript () {var script = document.createElement ( "script"); script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; document.body.appendChild (script); } 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); } Window.onload = loadScript;В першу чергу ми створюємо карту і встановлюємо її основні параметри (координати центру, наближення). Для цього, призначаємо обробник події window.onload (рядок 69). Цей оброблювач додає на сторінку тег script в параметрі src якого передається адреса ім'я методу, який буде викликаний після завантаження Google Maps (в даному випадку - initialize). Таким чином, всі наші настройки виконуються в цьому методі.
Виконуємо установку параметрів карти (рядки 4-10). Ми вказали: центральну точку (centerPoint), наближення (zoom) і тип карти (mapTypeId).
Тепер малюємо коло (рядки 13-28). Її центр збігається з центром карти, а радіус дорівнює 5 км. В налаштуваннях окружності вказуємо товщину і колір лінії, колір і прозорість фону і інші параметри.
Після цього розставляємо маркери об'єктів.
Нагадаю, що координати цих об'єктів знаходяться в масиві organizations, який був сформований серверним скриптом.
Тобто нам потрібно пройтися по всіх елементах цього масиву і розрахувати відстань від центру кола до поточного об'єкта (рядки 31-42).
Розрахунок відстаней для точок на поверхні Землі виконується за допомогою функції гаверсінусов (distHaversine). Її реалізацію на JavaScript я взяв тут .
Якщо ця відстань менше заданого, створюємо маркер і показуємо його на карті (рядки 36-40). В іншому випадку - переходимо до наступної пісні.
Як бачите, алгоритм досить простий. Якщо трохи вдосконалити скрипт, можна зробити коло переміщується і з перемінним радіусом. Таким чином, маючи гарну базу об'єктів для якогось міста, можна отримати досить зручний інструмент визначення найближчих до заданої точки об'єктів.
Якщо є питання або зауваження, пишіть, постараюся відповісти в коментарях 😉
Успіхів!
цікаво почитати
Хочете створити свій сайт? Template CMS - швидка і маленька CMS! Допоможе вирішити цю задачу з мінімальними витратами часу і ресурсів.
У роздумах, що подарувати на весілля друзям ? Спробуйте весільну фотокнигу.
заповнимо 3-ПДФО за 2011 рік за 1 день, від 500 рублів!
Lt;?Com/maps/api/js?