CITKIT.ru - свободные мысли о свободном софте
Деловая газета CitCity.ru Библиотека CITForum.ru Форумы Курилка
Каталог софта Движение Open Source Дискуссионный клуб Дистрибутивы Окружение Приложения Заметки Разное
16.04.2021

Последние комментарии

ОСТОРОЖНО: ВИНДОФИЛИЯ! (2250)
24 December, 22:53
Kubuntu Feisty (15)
24 December, 18:42
Один на один с Windows XP (3758)
24 December, 11:46

Каталог софта

Desktop
Internet
Internet-серверы
Безопасность
Бизнес/Офис
Игры
Мультимедиа
Наука
Операционные системы
Программирование
СУБД
Создание веб-сайтов
Утилиты

Статьи

Дискуссионный клуб
Linux в школе
Open Source и деньги
Open Source и жизнь
Windows vs Linux
Копирайт
Кто такие анонимусы
Лицензии
Нетбуки
Нужен ли русский Linux?
Пользователи
Дистрибутивы
Идеология
Выбор дистрибутива
Archlinux & CRUX
Debian
Fedora
Gentoo
LFS
LiveCD
Mandriva
OpenSolaris
Slackware
Zenwalk
Другие линуксы
BSD
MINIX
Движение Open Source
История
Классика жанра
Окружение
shell
Библиотеки UI
Графические среды
Шрифты
Приложения
Безопасность
Управление пакетами
Разное
Linuxformat. Колонки Алексея Федорчука
Заметки
Блогометки
Файловые системы
Заметки о ядре

Заметки :: Блогометки :: Сети и Интернет

Введение в API для карт Google

http://dotblog.ru/?blog_comment/sb/

Основной элемент в любом Google Карты API приложение - карта как таковая. Этот документ показывает использование основного объекта Gmap2 и базовые операции с картами.

«Привет Мир» от Google Карт

Простейший путь научиться работать с API Google Карт это посмотреть простейший пример. Следующая веб страница покажет 500х300 пикселей карту с центром на Пало Алто в Калифорнии.
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     <title>Google Maps JavaScript API Example</title>
     <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"           type="text/javascript"></script>
     <script type="text/javascript">

   function initialize() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   }
   }

      </script>
   </head>
   <body onload="initialize()" onunload="GUnload()">
      <div id="map_canvas" style="width: 500px; height: 300px"></div>
   </body>
</html> </
 

Вы можете посмотреть этот пример, скачать для редактирования и "поиграться" с ним, но замените в нем ключ на ваш собственный ключ API карт. (Если вы зарегистрировали ключ для конкретной директории то работать будут все поддиректории).

Даже в этом простом примере есть 5 вещей которые надо иметь в виду:

  1. Мы внедрили Java-скрипт с API карт использовав тег script.
  2. Мы создали div элемент который назвали "map_canvas" для размещения карты.
  3. Мы написали Java-скрипт функцию для создания объекта карты.
  4. Мы установили центр карты на конкретную географическую точку.
  5. Мы инициализировали объект карты из тега body по событию onLoad.

Эти шаги объясняются ниже.

Загрузка API Gооgle карт

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript">
</script> </
 
Адрес http://maps.google.com/maps?file=api&v=2&key=abcdefg содержит Java-скрипт файл который включает все символы и определения нужные для использования API Google карт. Ваша страница должна включать тег script с этим адресом с ключ который вы получили подписавшись на API. В этом примере ключ это "abcdefg".

DOM элемент карты

 <div id="map_canvas" style="width: 500px; height: 300px"></div> </ 
Для того что показать карту на веб странице мы должны зарезервировать под неё место. Обычно для этого создается именованный div элемент и получается ссылка на этот элемент через объектную модель браузера (DOM).

В примере выше мы определили назвали div элемент "map_canvas" и указали его размеры использовав атрибут style. Если вы не укажите размера карты явно использовав GMapOptions в конструкторе, то карта подразумевает использования размеров контейнера в качестве собственного размера.

GMap2 -Элементарный объект

var map = new GMap2(document.getElementById("map_canvas")); 
Java-cкрипт класс представляющий карту - GMap2 класс. Объекты этого класса определяют простую карту на странице. (Вы можете создать более одного экземпляр объекта этого класса - каждый будет определять отдельную карту на странице). Мы создаем новый экземпляр объекта этого класса использовав Java-скриптовый оператор new.

При создание нового экземпляра объекта карты вы указываете DOM ноду на странице (обычно DIV элемент) как контейнер для карты. HTML ноды - потомки Java-скриптогово объекта document , и мы получаем на ссылку на это элемент через document.getElementById() метод.

Этот код включает переменную (названную map) и присваивает этой переменную новый Gmap2 объект. Функция GMap2() это конструктор и он определяет(цитата для ясности из Справки по API Google Карт показанное ниже.

Конструктор Описание
GMap2(container, opts?) Создает новую карту в указанном (параметр: container) HTML контейнере, что обычно DIV элемент. Вы также можете передать дополнительные параметры типа GMap2Options в opts параметре.

Имейте в виду что поскольку Java-скрипт свободно типизируемый язык , мы можем не указывать

опциональные параметры в конструкторе и мы не делаем это здесь.

Инициализация карты

map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
Как только мы создали карту через GMap2 конструктор, мы должны сделать ещё одну вещь: инициализировать карту. Эта выполняется с использование метода setCenter() карты. Метод setCenter() требует координаты в GLatLng и уровень приближения и этот метод должен выполнен до любых остальных операций выполняемых над картой включая настройку любых других атрибутов.

Загрузка карты

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript">
</script> </
Пока HTML страница прорисовывается, объектная модель документа (DOM) выстраивается, и любые внешние картинки и скрипты скачиваются и комбинируются с объектом document. Для гарантии что наша карта будет помещена на страницу после полной загрузки, мы выполняем функцию что создает GMap2 объект, как только элемент на HTML странице получает событие onload. Выполнение таким образом позволяет избежать непредсказуемого поведения и дает нам больше контроля над тем как и когда прорисовывается карта.

Оnload как пример обработчики события.API Google карт также обеспечивает множество событий на которые вы можете поставить обработчики для определения изменений состояния. Смотри События Карты и События и Обработчики для более полной информации.

GUnload() функция - сервисная функция, разработанная, чтобы предотвратить утечки памяти.

Широты и Долготы

Сейчас у нас есть карта и нам требуется способ чтоб ссылаться на локации на карте. GLatLng объект предоставляет такой механизм в пределах API Карт Google. Вы создаете GlatLng объект передав параметры в порядке {широта , долгота} принятые в картографии.
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude); 
На заметку: процесс преобразования адреса в географическую точку называется геокодинг и обсуждается в деталях в разделе API Google Карты Сервисы.

Так же легко ссылаться на географические точки, также определять географические границы объектов. Например, карта показывает текущее "окно" всего мира в пределах того, что известно как область отображения. Эта область отображения может быть определена по точка в углах прямоугольника. Объект GLatLngBounds обеспечивает эту функциональность , определяет прямоугольную область используя два GLatLng объекта представляющие ограничения по серверной и южной точкам ограничивающей прямоугольник, соответственно.

GLatLng много используются в API Google карт. Объект GMarker передает GLatLng В конструкторе для примера, и устанавлявает перекрывающий маркер на карте по данной географической локации.

Следующий пример использует getBounds() для получения текущей области отображения и там случайно располагает 10 маркеров в границе карты.

function initialize() {
   var map = new GMap2(document.getElementById("map_canvas"));
   map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); } } <

Смотреть пример (map-markers.html).

На заметку: Подробнее об объекте GMarker в раздеде Оверлей.

Атрибуты Карты

По умолчанию в картах показываемых API Google картами используются стандартными "нарисованными" плитками вид. Однако, API Google Карт также поддерживает другие типы карт. Поддерживаемые типы карт:
  • G_NORMAL_MAP- вид по умолчанию (схематичный вид пр. переводчика )
  • G_SATELLITE_MAP - Показывает Google Earth спутниковые изображения
  • G_HYBRID_MAP - Показывает смесь из нормально и спутниковых видов
  • G_DEFAULT_MAP_TYPES - массив из этих трех типов, полезный для итерационной обработки.
  • G_PHYSICAL_MAP: Карта которая отображает рельеф, растительность и возвышенности. (мое дополнение)

Вы можете установить тип карты использовав метод setMapType() объекта GMap2. Для примера следующий код устанавливает на карте спутниковый вид с Google Earth.

var map = new GMap2(document.getElementById("map_canvas")); map.setMapType(G_SATELLITE_MAP); 
Карта также содержит большое количество атрибутов полезных для настройки. Для примера нахождение размеров текущей области отображения используется метод getBounds() объекта Gmap2 который возращает значение в GlatLngBounds.

Так же каждая карта содержит уровень приближения который определяет разрешение текущего вида. Уровень приближения с 0 (самый низкий уровень приближения на котором весь мир умещается на одной карте )по 19 (наивысший уровень приближения - видны отдельные здания ) возможен при нормальном виде карты. Уровень приближения меняется в зависимости куда в мире вы смотрите как данные в некоторых частях света более подробны чем в остальных. Уровень приближения более 20 возможен в спутниковом виде.

Вы можете получить текущий уровень приближения используемый картой использовав метод getZoom() объекта GMap2.

Подробнее о уровне приблежения , о кусочках карты и создание ваших собственных типов карт доступен резделе Оверлии кусочков (Tile Overlays).

Взаимодействие карты

Сейчас когда у вас есть объект Gmap2 вы можете взаимодействовать с ним. Базовый объект карты выглядит и ведет себя аналогично карте с которой вы взаимодействуете на Сайте Google Карт и идет со многими встроенными режимами. Объект Gmap2 так же предоставляет множество методов настройки для изменения поведения самого объекта.

По умолчанию объект карты реагирует на активность пользователя как он это делает на http://maps.google.com. Вы можете изменить это поведение большим количеством полезных методов, когда захотите. Для примера метод GMap2.disableDragging() отключает способность к перетаскиванию карты на новое место.

Вы можете также взаимодействовать с картой программно. Объект GMap2 поддерживает множество методов которые изменяют состояние карты напрямую. Для примера setCenter(), panTo, и zoomIn() методы действуют на карте программно, а не за счет взаимодействия с пользователям.

Следующий пример показывает карту, ждет две секунды , и затем перемещается к новой центральной точке. Если указанная точка в видимой части карты то карта перемещается плавно до точки, если нет происходит резкий переход на точку.

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
   map.panTo(new GLatLng(37.4569, -122.1569));
}, 1000); 
Смотреть пример (map-animate.html).

Подробнее о сложных взаимодействиях читайте API Событий Карт.

Информационные окна

Каждая карта в API Google карт может показывать простое "Информационное окно" типа GInfoWindow который отображает HTML содержание в плавающим окне над картой. Информационные окна выглядят подобно шарикам со словами в комиксах; окно имеет пространство содержания и линии связи с определенной точкой на карте. Вы можете увидеть информационные окна в действие кликнув по маркеру на Картах Google.

Объект GinfoWindow не имеет конструктора Информационное окно создает автоматически и присоединяется к карте когда вы создаете карту. Вы не можете показывать более одного информационного окна на одной карте одновременно, но вы можете перемещать информационное окно и менять его содержание по мере необходимости.

Объект Gmap2 обеспечивает метод openInfoWindow() который принимает точку и HTML DOM элемент в качестве аргументов. HTML DOM элемент добавляется в контейнер информационного окна, и конец информационного окна фиксирует на переданной точке.

Метод openInfoWindowHtml() GMap2 аналогичный, но он принимает HTML строку это предпочтительнее использованию DOM элемента.

Для создания информационного окна вызовите openInfoWindow метод передав ему место и DOM элемент для отображения. В следующем примере показывает информационное окно зафиксированное на середине карты с простым "Привет мир" сообщением.

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
               document.createTextNode("Hello, world"));

Cмотреть пример (map-infowindow.html).

Полнаю документацию по информационным окнам читайте в справке по API Google Карт.




Комментарии

Страницы комментариев: 1 :: 2 :: следующая

аноним, Mon May 18 15:36:09 2009:
Очень помогло спс.
аноним, Tue Dec 2 18:07:53 2008:
слушай, реально выручил, спс)
Сергей, Mon Oct 20 16:33:09 2008:
Спасибо, ваша информация очень помогла
аноним, Sun Oct 12 15:19:09 2008:
Спасибо за статью !
аноним, Sat Sep 20 02:08:00 2008:
Доброй ночи! Может кто-нибудь подскажет, как использовать getBounds() только не для случайного вывода, а конкретных точек из xml?
fl@nker, Wed Aug 6 22:44:02 2008:
Спасибо автору, очень полезно и очень понятно!!!
аноним, Fri Aug 1 13:38:51 2008:
респект
аноним, Sat Jul 26 18:02:56 2008:
Спасибо большое
андрей, Tue May 27 02:29:29 2008:
большое спасибо автору за статью. для человек даже с базовыми знаниями всё очень понятно.
Saint_Byte, Wed Apr 16 15:23:35 2008:
О блин я а не в курсе =)

Страницы комментариев: 1 :: 2 :: следующая

Комментарии заморожены.

Новости:

Все новости на CitCity.ru

Компании месяца

 
Последние комментарии
Почему школам следует использовать только свободные программы (101)
20 Декабрь, 14:51
ОСТОРОЖНО: ВИНДОФИЛИЯ! (2250)

24 Декабрь, 22:53
Linux в школе: мифы про школу и информатику (334)
24 Декабрь, 22:43
Kubuntu Feisty (15)
24 Декабрь, 18:42
Software is like sex: it's better when it's free.
©Linus Torvalds