Меню
Главная
Случайная статья
Настройки
|
div.GoogleMap — блочный элемент управления для отображения на страницах Википедии карт Google, а также возможности отрисовки маркеров и треков на картах. Скрипт, обеспечивающий функциональность div.GoogleMap, находится по адресу Участник:Nitobus/div.GoogleMap.js. Для подключения скрипта необходимо отредактировать ваш личный common.js файл на странице Настройки/Внешний вид, добавив в common.js файл строку:
importScript('Участник:Nitobus/div.GoogleMap.js');
После сохранения common.js файла очистите кеш браузера (Клавиша Ctrl+
Содержание
Карты Google и лицензионные ограничения
Карты Google — набор приложений, построенных на основе бесплатного картографического сервиса по отображению карт и спутниковых снимков планеты Земля, предоставляемых компанией «Google». Помимо картографического сервиса компания «Google» предоставляет технологию доступа к сервису со сторонних веб-страниц и сайтов - JavaScript API Google Карт (версия 3). Коммерческим веб-сайтам разрешается с помощью JavaScript API Google Карт производить до 25 000 загрузок карты в день, при превышении этого значения необходимо приобрести лицензию API Google Карт. Некоммерческие организации, к которым относится и владелец сайта Википедия «Фонд Викимедиа», освобождены от лицензионных ограничений на использование API Карт.
Использование
Для вставки в текст статьи карт Google необходимо добавить в вики-текст тег div с присвоением ему класса GoogleMap. Надо отметить, что несмотря на то, что технология JavaScript API Google Карт предоставляет достаточно широкие возможности для доступа и работы с картами, скрипт, обеспечивающий функциональность элемента div class="GoogleMap", использует только небольшую часть этих возможностей, а именно: отображение карты или спутникового снимка, отрисовку маркеров на карте, отрисовку треков на карте. Ниже приводятся несколько примеров по использованию перечисленных возможностей.
Пример 1. Простой пример
Добавление класса GoogleMap к элементу div отображает карту мира. Атрибут style определяет длину и ширину прямоугольника, выделяемого под карту. Все стандартные возможности работы с картами Google (прокрутка, увеличение/уменьшение масштаба, переключение типа отображения карта/спутник) в отображаемой карте доступны.
<div class="GoogleMap" style="width: 400px; height: 400px;"></div>
Результат: Карта мира.
Пример 2. Масштабирование, позиционирование и выбор типа карты
Для выбора параметров начального отображения карты необходимо поместить внутрь элемента div class="GoogleMap" вложенный элемент div class="map", определяющий свойства карты. Рассмотрим следующий пример.
<div class="GoogleMap" style="width: 500px; height: 500px;">
<div class="map" data-zoom=12 data-lat=55.7515 data-lon=37.6157 data-mapTypeId=ROADMAP></div>
</div>
Значение атрибута data-zoom=12 элемента div class="map" определяет масштаб карты. Значение 0 соответствует наименьшему уровню масштабирования (карта мира), значение 20 - наибольшему. Если данный атрибут отсутствует, то по умолчанию используется значение 0.
Значения атрибутов data-lat=55.7515 data-lon=37.6157 элемента div class="map" определяют географические координаты (широту и долготу) центра карты. Если данные атрибуты отсутствуют, то по умолчанию используются значения 0.
Значение атрибута data-mapTypeId=ROADMAP элемента div class="map" определяет тип карты, который может быть одним из четырех типов:
- ROADMAP – карта-схема.
- SATELLITE – спутниковый снимок.
- HYBRID – спутниковый снимок с нанесенными элементами карты-схемы.
- TERRAIN – карта с рельефом местности.
Если данный атрибут отсутствует, то по умолчанию используется значение ROADMAP.
Результат: Москва, центр.
Пример 3. Добавление на карту маркера
Для добавления на карту маркера, необходимо поместить внутрь элемента div class="GoogleMap" вложенный элемент div class="wpt", определяющий маркер. Количество маркеров (элементов div class="wpt") на карте не ограничено. Рассмотрим тот же пример с добавлением одного маркера в центр карты.
<div class="GoogleMap" style="width: 500px; height: 500px;">
<div class="map" data-zoom=12 data-lat=55.7515 data-lon=37.6157 data-mapTypeId=ROADMAP></div>
<div class="wpt" data-lat=55.45.05.40 data-lon=37.36.56.52 data-name="The Moscow Kremlin"></div>
</div>
Значения атрибутов data-lat=55.45.05.40 data-lon=37.36.56.52 элемента div class="wpt" определяют географические координаты (широту и долготу) маркера. Обратите внимание, что в данном примере для записи значений географических координат маркера применен формат в виде "градусы"."минуты"."секунды"."доли секунды", в то время как для записи значений географических координат центра карты применен формат в виде "градусы"."доли градусов". Вообще говоря, для записи значений географических координат любых объектов допустимы оба из этих форматов, значение с одной десятичной точкой будет восприниматься как "градусы"."доли градусов", а значение с двумя или тремя десятичными точками будет восприниматься как "градусы"."минуты"."секунды"."доли секунды".
Значение атрибута data-name="The Moscow Kremlin" элемента div class="wpt" определяет наименование маркера и отображается при наведении мыши на маркер.
Результат: Москва, Кремль.
Пример 4. Добавление на карту трека
Трек - последовательность точек на карте, соединенных линией. Для добавления на карту трека, необходимо поместить внутрь элемента div class="GoogleMap" вложенный элемент div class="trk", а в свою очередь внутрь этого элемента - ряд элементов div class="trkpt", определяющих точки трека. Элемент div class="trk" не требует использования атрибутов, а элементы div class="trkpt" используют для определения точек трека атрибуты data-lat и data-lon, уже описанные выше. Количество треков на карте (элементов div class="trk") и количество точек в каждом треке (элементов div class="trkpt") не ограничено. Рассмотрим пример, иллюстрирующий отображение нескольких маркеров и одного трека на карте.
<div class="GoogleMap" style="width: 500px; height: 500px;">
<div class="map" data-zoom=-1 data-lat=0 data-lon=0 data-mapTypeId=ROADMAP></div>
<div class="wpt" data-lat=55.776944 data-lon=37.581944 data-name="Belorusskaya"></div>
<div class="wpt" data-lat=55.779444 data-lon=37.601111 data-name="Novoslobodskaya"></div>
<div class="wpt" data-lat=55.779722 data-lon=37.633611 data-name="Prospekt Mira"></div>
<div class="wpt" data-lat=55.776111 data-lon=37.655833 data-name="Komsomolskaya"></div>
<div class="wpt" data-lat=55.758611 data-lon=37.659722 data-name="Kurskaya"></div>
<div class="wpt" data-lat=55.739444 data-lon=37.653333 data-name="Taganskaya"></div>
<div class="wpt" data-lat=55.731111 data-lon=37.636388 data-name="Paveletskaya"></div>
<div class="wpt" data-lat=55.728888 data-lon=37.622777 data-name="Dobryninskaya"></div>
<div class="wpt" data-lat=55.729166 data-lon=37.611388 data-name="Oktyabrskaya"></div>
<div class="wpt" data-lat=55.735277 data-lon=37.593055 data-name="Park Kultury"></div>
<div class="wpt" data-lat=55.743611 data-lon=37.566666 data-name="Kiyevskaya"></div>
<div class="wpt" data-lat=55.760277 data-lon=37.577222 data-name="Krasnopresnenskaya"></div>
<div class="trk">
<div class="trkpt" data-lat=55.776944 data-lon=37.581944></div>
<div class="trkpt" data-lat=55.779444 data-lon=37.601111></div>
<div class="trkpt" data-lat=55.779722 data-lon=37.633611></div>
<div class="trkpt" data-lat=55.776111 data-lon=37.655833></div>
<div class="trkpt" data-lat=55.758611 data-lon=37.659722></div>
<div class="trkpt" data-lat=55.739444 data-lon=37.653333></div>
<div class="trkpt" data-lat=55.731111 data-lon=37.636388></div>
<div class="trkpt" data-lat=55.728888 data-lon=37.622777></div>
<div class="trkpt" data-lat=55.729166 data-lon=37.611388></div>
<div class="trkpt" data-lat=55.735277 data-lon=37.593055></div>
<div class="trkpt" data-lat=55.743611 data-lon=37.566666></div>
<div class="trkpt" data-lat=55.760277 data-lon=37.577222></div>
<div class="trkpt" data-lat=55.776944 data-lon=37.581944></div>
</div>
</div>
В данном примере маркеры поставлены в координатах расположения станций кольцевой линии московского метрополитена, а трек, состоит из точек с такими же координатами, и, таким образом, соединяет станции метро линией. Также надо обратить внимание, на использующееся в данном примере значение атрибута data-zoom=-1 элемента div class="map". Значение данного атрибута, равное -1, означает, что масштаб и центрирование карты будут рассчитаны автоматически, чтобы наилучшим образом отобразить на карте все требуемые маркеры и треки. Понятно, что при автоматическом масштабировании и центрировании карты атрибуты data-lat и data-lon элемента div class="map" игнорируются.
Результат: Московское метро, Кольцевая линия.
Пример 5. Отображение объемной информации
Ниже приводится пример отображения нескольких треков, определяющих административные границы Москвы и её административных округов, при этом общее количество точек отображаемых треков составляет около 20 тысяч. Пример не демонстрирует какой-либо новой функциональности, а служит только для демонстрации возможности отображения на карте очень большого количества информации. Поскольку отображение такого количества точек может вызвать некоторую задержку, то данный пример приведен на отдельной странице.
Карта границ административных округов Москвы
|
|