Эксперименты с Google Maps
Карты Google Maps находят многочисленные применения, позволяя создавать различные интерактивные сервисы. Мы рассмотрим некоторые возможности на примерах. Английский оригинал статьи можно найти по адресу http://maps.forum.nu/.
Главная карта

Настраиваемая пользователем карта с информацией о дорожном движении и подгрузкой меток из файла XML ('antennas'), геокодированием, и проч.
Кликните на территории США, чтобы получить информацию о штате.
Отображение трэка из файлов Magellan Explorist

Загрузите файл трэка с Magellan Explorist GPS и увидите его нарисованным на карте.
Выбор маршрута поездки - устаревший способ

Способ устарел, поскольку теперь существует объект GDirections в стандартном API и лишних ухищрений не требуется.
Выбор маршрута поездки - правильный способ

Построение маршрута с помощью методов объекта GDirections. Используется собственный стиль вывода результатов.
Сканирующий радар

Этот пример не более, чем игрушка и написан просто ради смеха. Представляет собой анимированное окно радара с ломаными линиями.
Воздушный путь самолета

Кликните в точке вылета, в точке прилета и увидите воздушный маршрут самолета, изображенный дугой.
Полигоны, пересекающие нулевой меридиан (только для браузера Firefox)

Для отображения линий, пересекающих нулевой меридиан, их необходимо необходимо разделять на две части.
Нарисуйте полигон, кликая на карте и кликните на первой метке ("start marker"), чтобы замкнуть полигон. Клиентский код рисует полилинию, точки пересылаются на сервер и сервер возвращает полигональное представление полученной области, разделенной на части.
Отображение маршрутов и вычисление расстояния

Нарисуйте ломаную линию (маршрут), кликая по карте. В правой части страницы будет отображаться длина каждого сегмента.
Отображение меток из базы данных

Используется связка PHP/MySQL, исходный код см. здесь.
Добавьте метку. Метка будет сохранена в базе данных и отображена при обновлении карты.
Синхронизация карт

Набор карт, синхронизированных между собой. Практической ценности пример не имеет :-)
Синхронизация наложенных карт

Набор карт, синхронизированных между собой. Пример полезен не более предыдущего :-)
Расстояние от указателя мышки до линии

Кликните на карте пару раз или больше для создания ломаной линии. Расстояние от указателя мыши до каждой линии вычисляется в пикселях.
Миникарта в окне информации

Кликните на метке и на вкладке "Местоположение" ("Location").
Сенсорный круг (на касательной плоскости)

1. Кликните на карте в точке, где будет располагаться центр круга
2. Кликните снова, чтобы задать радиус круга
3. Переместите мышку внутрь круга и наружу.
Полученный круг на самом деле не лежит на поверхности Земли, а лишь касается ее, но для малых радиусов это не существенно.
Сенсорный круг (на поверхности планеты)

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

Управление масштабом карты с помощью колесика мыши.
Изменение размера карты "на лету"

Пример демонстрирует возможность отображать и прятать карту, а также изменять ее масштаб динамически.
Главная карта

Настраиваемая пользователем карта с информацией о дорожном движении и подгрузкой меток из файла XML ('antennas'), геокодированием, и проч.
Кликните на территории США, чтобы получить информацию о штате.
Отображение трэка из файлов Magellan Explorist

Загрузите файл трэка с Magellan Explorist GPS и увидите его нарисованным на карте.
Выбор маршрута поездки - устаревший способ

Способ устарел, поскольку теперь существует объект GDirections в стандартном API и лишних ухищрений не требуется.
Выбор маршрута поездки - правильный способ

Построение маршрута с помощью методов объекта GDirections. Используется собственный стиль вывода результатов.
Сканирующий радар

Этот пример не более, чем игрушка и написан просто ради смеха. Представляет собой анимированное окно радара с ломаными линиями.
Воздушный путь самолета

Кликните в точке вылета, в точке прилета и увидите воздушный маршрут самолета, изображенный дугой.
Полигоны, пересекающие нулевой меридиан (только для браузера Firefox)

Для отображения линий, пересекающих нулевой меридиан, их необходимо необходимо разделять на две части.
Нарисуйте полигон, кликая на карте и кликните на первой метке ("start marker"), чтобы замкнуть полигон. Клиентский код рисует полилинию, точки пересылаются на сервер и сервер возвращает полигональное представление полученной области, разделенной на части.
Отображение маршрутов и вычисление расстояния

Нарисуйте ломаную линию (маршрут), кликая по карте. В правой части страницы будет отображаться длина каждого сегмента.
Отображение меток из базы данных

Используется связка PHP/MySQL, исходный код см. здесь.
Добавьте метку. Метка будет сохранена в базе данных и отображена при обновлении карты.
Синхронизация карт

Набор карт, синхронизированных между собой. Практической ценности пример не имеет :-)
Синхронизация наложенных карт

Набор карт, синхронизированных между собой. Пример полезен не более предыдущего :-)
Расстояние от указателя мышки до линии

Кликните на карте пару раз или больше для создания ломаной линии. Расстояние от указателя мыши до каждой линии вычисляется в пикселях.
Миникарта в окне информации

Кликните на метке и на вкладке "Местоположение" ("Location").
Сенсорный круг (на касательной плоскости)

1. Кликните на карте в точке, где будет располагаться центр круга
2. Кликните снова, чтобы задать радиус круга
3. Переместите мышку внутрь круга и наружу.
Полученный круг на самом деле не лежит на поверхности Земли, а лишь касается ее, но для малых радиусов это не существенно.
Сенсорный круг (на поверхности планеты)

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

Управление масштабом карты с помощью колесика мыши.
Изменение размера карты "на лету"

Пример демонстрирует возможность отображать и прятать карту, а также изменять ее масштаб динамически.
Comments