Карты Google зарекомендовали себя как очень успешный сервис Google, включающий ряд бесценных инструментов, таких как Просмотр улиц , Планирование маршрутов и Трафик Google . Многие компании и организации полагаются на Google Maps для предоставления своих услуг — и благодаря API Карт Google они могут это сделать.
API Карт Google и GMaps
Google представил API Карт Google в 2005 году. Это позволило разработчикам создавать собственные приложения с помощью Карт. Впоследствии Google запустил API для разработки приложений для Android и iOS.
Как бы ни были полезны API Карт, им нужно немного знаний, чтобы их использовать. Вот где появляется GMaps.js . GMaps.js — это библиотека JavaScript с MIT-лицензией с открытым исходным кодом. GMaps, созданный Густаво Леоном , направлен на упрощение оригинального JavaScript API Карт Google. Он заботится о обширном коде API и предоставляет соответствующие методы для работы с Картами. Это чище, более кратко и, следовательно, проще в использовании.
В этой статье мы рассмотрим такие компоненты карты, как маркеры, полигоны и наложения. Мы также обсудим статические карты и использование геолокации и геокодирования для работы в местоположении пользователя. Все это будет со ссылкой на GMaps. Это помогает вам создавать картографические приложения с помощью простых в использовании методов. Я использовал его для создания примера приложения ( Mapit ), о котором я расскажу в конце статьи.
Сравнение API Google и GMaps
Пример ниже взят из оригинальной страницы документации . Код (только JavaScript) загружает карту с центром в широте -34.397 и долготой 150.644 с уровнем масштабирования 8 :
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); }
map — это идентификатор элемента HTML, куда будет загружаться карта.
Мы можем написать то же самое основное приложение с GMaps, как это:
new GMaps({ el: '#map', lat: -34.397, lng: 150.644, zoom: 8 });
Этот учебник проведет вас через некоторые из наиболее часто используемых компонентов на картах, с примерами ручек для демонстрации каждого из них.
Начиная
Создайте базовую HTML-страницу и добавьте ссылку на API Карт. Вам также необходимо включить библиотеку GMaps. Так что зайдите в GMaps и скачайте gmaps.js . Включите его в свою веб-страницу, и все готово.
<!doctype html> <html> <head> <style> #map { width: 400px; height: 400px; } </style> </head> <body> <div id="map"></div> <!-- Google Maps JS API --> <script src="https://maps.googleapis.com/maps/api/js"></script> <!-- GMaps Library --> <script src="gmaps.js"></script> <script> /* Map Object */ var mapObj = new GMaps({ el: '#map', lat: 48.857, lng: 2.295 }); </script> </body> </html>
Это элементарная страница, на которую я буду ссылаться в приведенных ниже примерах. Объект карты будет изменен в некоторых из этих примеров.
Компоненты
API Карт предлагает различные компоненты для настройки карт. Те же компоненты могут быть добавлены в GMaps с меньшим количеством кода.
События
Изменение в HTML DOM (объектная модель документа) может быть описано как событие. Вы можете вызвать функцию при возникновении определенных событий на карте (например, двойной щелчок или наведение мыши). Следующий фрагмент определяет функции для событий click и zoom_changed :
var mapObj = new GMaps({ el: '#map', lat: 48.857, lng: 2.295, click: function(e) { alert('You clicked on the map'); }, zoom_changed: function(e) { alert('You zoomed the map'); } });
Вы можете добавить другие события, если хотите. Список всех событий на карте представлен в разделе « События » в документации . Вот некоторые из полезных:
| Событие | Описание |
|---|---|
dblclick |
Двойной щелчок мышью |
mouseover |
Мышь входит в карту |
mouseout |
Мышь выходит из карты |
drag |
Карта перетаскивается |
rightclick |
Щелчок правой кнопкой мыши |
Маркеры
Маркер — это локатор на карте. Обычно он отображается как воздушный шар, нависающий над отмеченным местом. GMaps предлагает метод addMarker() для добавления маркера. Он принимает литерал объекта со следующими свойствами для маркера:
- широта: широта
- lng : долгота
- title : заголовок отображается при наведении курсора
- значок : пользовательское изображение для маркера
- детали : пользовательский объект с дополнительными данными
- infoWindow : информация о маркере
Из них обязательно присваивать значения lat и lng , в то время как другие являются необязательными. Значение infoWindow должно быть другим объектом. Этот объект сам обладает следующими свойствами:
- контент : HTML контент
- maxWidth : максимальная ширина для окна. Если не установлено, окно охватывает длину текста внутри него.
infoWindow поддерживает еще несколько опций .
Этот фрагмент является допустимым примером addMarker() :
var m = mapObj.addMarker({ lat: 48.8583701, lng: 2.2944813, title: 'Eiffel Tower', infoWindow: { content: '<h4>Eiffel Tower</h4><div>Paris, France</div>', maxWidth: 100 } });
addMarker() также принимает события — например, маркер, реагирующий на событие mouseover:
mapObj.addMarker({ lat: 48.8583701, lng: 2.2944813, mouseover: function(e) { alert('Triggered'); } });
Маркер можно удалить с помощью removeMarker() . Передайте ему объект-маркер (в нашем случае m ) в качестве аргумента:
mapObj.removeMarker(m);
removeMarkers() коллективно удаляет все маркеры, связанные с объектом карты.
mapObj.removeMarkers();
Geocoding
Чтобы найти любую точку на карте, вам нужно иметь ее географические координаты ( широту и долготу ). Геокодирование рассчитывает эти географические координаты по заданному адресу. Метод geocode() позволяет нам делать то же самое. Он принимает адрес местоположения в качестве входных данных и обрабатывает координаты для этого адреса.
- адрес : адресная строка местоположения
- обратный вызов : функция, вызываемая после геокодирования
Давайте рассчитаем широту и долготу для Стоунхенджа
, расположенного в Великобритании
. Фрагмент ниже вычисляет географические координаты данного адреса и центрирует карту в этом месте. Если результатов не найдено, отображается сообщение:
GMaps.geocode({ address: 'Stonehenge, United Kingdom', callback: function(results, status) { if (status == 'OK') { latlng = results[0].geometry.location; mapObj.setCenter(latlng.lat(), latlng.lng()); } else if (status == 'ZERO_RESULTS') { alert('Sorry, no results found'); } } });
setCenter()принимает широту и долготу в качестве своих параметров и центрирует карту в этом географическом местоположении. Он также принимает необязательный параметр обратного вызова, функцию, запускаемую после центрирования карты.
В функции обратного вызова есть два параметра: results и status .
results является массив объектов, в котором хранятся местоположения всех мест с заданным адресом. Поскольку может быть более одного места с одинаковым именем, результат может быть более одного. results хранит каждый из них. Расположение i- го результата может быть определено с помощью results[i].geometry.location .
Если по адресу не найдено результатов, status сохраняет ZERO_RESULTS
, иначе ОК
.
геолокации
Геолокация рассчитывает текущее географическое положение пользователя. Метод geolocate() позволяет нам использовать эту функцию. Он принимает объектный литерал с четырьмя свойствами, из которых всегда является необязательным, а остальные — обязательными. Каждое свойство определяется как функция, которая выполняется в определенных случаях:
- успех : геолокация прошла успешно
- ошибка : геолокация не удалась
- not_supported : браузер не поддерживает геолокацию
- всегда : выполняется в каждом случае
GMaps.geolocate({ success: function(position) { mapObj.setCenter(position.coords.latitude, position.coords.longitude); }, error: function(error) { alert('Geolocation failed: ' + error.message); }, not_supported: function() { alert("Your browser does not support geolocation"); }, always: function() { alert("Always"); } });
Ломаные
Полилинии помогают отследить путь на карте. Путь можно сформировать, соединив координаты разных точек. Метод drawPolyline() рисует полилинию для пути. Этот путь предоставляется в виде массива координат ( широта и долгота ). Помимо пути , вы можете указать другие свойства для полилинии. Некоторые из них:
- strokeWeight
- strokeColor
- strokeOpacity
Все три определяют стиль для полилинии. Есть и другие , хотя мы не будем их освещать в этой статье.
var path = [ [-12.044012922866312, -77.02470665341184], [-12.05449279282314, -77.03024273281858], [-12.055122327623378, -77.03039293652341], [-12.075917129727586, -77.02764635449216], [-12.07635776902266, -77.02792530422971], [-12.076819390363665, -77.02893381481931], [-12.088527520066453, -77.0241058385925] ]; var pl = mapObj.drawPolyline({ path: path, strokeColor: '#76ff03', strokeOpacity: 1, strokeWeight: 10 });
removePolyline() можно удалить с помощью removePolyline() . Он принимает объект полилинии в качестве параметра. Удалите pl polyine, используя:
mapObj.removePolyline(pl);
removePolylines() удаляет все полилинии, связанные с объектом карты.
mapObj.removePolylines();
Полигоны
drawPolygon() помогает вам создать многоугольник на карте. Как и drawPolyline() , вам нужно определить свойство paths . Свойства стиля обводки ( strokeWeight , strokeColor и strokeOpacity ) также работают с полигоном. Они определяют границу многоугольника. Помимо этого, вы можете указать цвет заливки и прозрачность для многоугольника:
- Цвет заливки
- fillOpacity
Другие варианты полигонов можно найти в документации .
var path = [ [-12.040397656836609, -77.03373871559225], [-12.040248585302038, -77.03993927003302], [-12.050047116528843, -77.02448169303511], [-12.044804866577001, -77.02154422636042] ]; var pg = mapObj.drawPolygon({ paths: path, strokeColor: '#000000', strokeOpacity: 0.3, strokeWeight: 2, fillColor: '#00e676', fillOpacity: 0.4 });
Помните: это свойство path для drawPolyline() и свойство path для drawPolygon() .
Чтобы удалить полигон pg , используйте:
mapObj.removePolygon(pg);
Удалите все полигоны, определенные в mapObj :
mapObj.removePolygons();
круги
Создание круглых фигур с помощью drawPolygon() не является жизнеспособным. drawCircle() поможет вам в этом. Его список параметров включает в себя:
- широта: широта для центра
- lng : долгота для центра
- радиус : радиус в метрах на поверхности Земли.
Другие параметры включают стили для обводки и заливки формы (такие же, как у многоугольника) и некоторые другие .
var c = mapObj.drawCircle({ lat: 51.178875, lng: -1.826259, radius: 300, fillColor: 'yellow', fillOpacity: 0.5, strokeWeight: 0, click: function(e){ alert('You are inside 300m radius of Stonehenge') } });
Накладки
Наложение — это слой поверх карты с HTML-содержимым. GMaps поддерживает оверлеи с помощью drawOverlay() . Он принимает следующий хеш:
- широта: широта
- lng : долгота
- контент : HTML контент
- verticalAlign : верх, середина, низ
- HorizontalAlgin : левый, средний, правый
- verticalOffset
- horizontalOffset
Выравнивания и смещения относятся к точке, определенной широтой и долготой .
Пример фрагмента:
var ol = mapObj.drawOverlay({ lat: 27.1733151, lng: 78.0409684, content: '<div class="overlay">Taj Mahal</div>', verticalAlign: 'top', horizontalOffset: -40 });
Вы можете определить стили CSS для содержимого. В нашем примере мы определили класс overlay .
.overlay { border: 1px solid #b71c1c; background: #d50000; padding: 5px; font-size: 17px; color: white; }
Удалить оверлей? Ну, вы это знаете
mapObj.removeOverlay(ol);
Удалить все наложения для объекта карты? Вы это тоже знаете:
mapObj.removeOverlays();
Статические Карты
Статическая карта — это изображение карты, которое может быть независимо встроено в веб-сайты. GMaps позволяет генерировать URL для статической карты. Этот URL может быть добавлен в качестве источника к изображению.
staticMapURL() генерирует требуемый URL карты после принятия следующих параметров:
- размер : массив ширины и высоты в пикселях
- Lat
- LNG
- увеличить
Фрагмент кода:
url = GMaps.staticMapURL({ size: [500, 500], lat: 51.178882, lng: -1.8284037, zoom: 16 });
В нашем примере мы создали элемент img и добавили URL к его src :
var map = document.getElementById('map'); var static_img = document.createElement('img'); static_img.src = url; map.appendChild(static_img);
Мы также можем применять маркеры и полилинии к статическим картам.
Пример приложения (Mapit)
Mapit ( просмотр источника на GitHub ) создает статическую карту для маршрута между источником и пунктом назначения. Нажмите на адрес на карте и поместите два маркера (источник и пункт назначения). Mapit проследит маршрут от одного маркера до другого. Это создаст ссылку на статическую карту с текущей конфигурацией. Вы можете просмотреть статическую карту и загрузить изображение.
Вывод
В этой статье рассматриваются основные компоненты карт. Я уверен, что это послужило хорошим руководством по началу работы с GMaps и приложениями для интерактивных карт. Но это не должно останавливаться на достигнутом. С GMapsjs можно сделать гораздо больше.
Вы уже использовали GMaps? Если так, каков был ваш опыт? Если у вас есть какие-либо комментарии или вопросы, пожалуйста, присоединяйтесь к обсуждению ниже.