Главная » Создание сайтов » Программирование » Стандартные элементы управления веб-картой

Стандартные элементы управления веб-картой

Стандартные элементы управления веб-картой
В предыдущей статье “Начинаем использование API Google карт” я рассказал о добавлении веб-карты Google на вашей странице.

Сейчас мы рассмотрим предыдущий пример более подробно и я расскажу вам о добавлении элементов управления этой картой. А именно:

  1. Увеличение и уменьшение области просмотра.
  2. Масштабная линейка.
  3. Переключение типов карты.
  4. Свертываемая обзорная карта в углу экрана.


0. Предыдущий пример.









Рассмотрим все по порядку.
– содержит url файла, который включает в себя API Google map.

– объявляем место отображения карты.

– при загрузке страницы, запускаем функцию показа нашей карты.
О самом javascript коде я показал в комментариях к коду.

Далее будем использовать только этот javascript код, для добавления элементов управления.

Для добавления всех функций управления используется:
{объект карты}.addControl({функция});

1. Увеличение и уменьшение области просмотра.
Имеется три вида функции увеличения и уменьшения масштаба:
Стандартные элементы управления веб-картой Увеличение и уменьшение области просмотраnew GLargeMapControl() — крупный элемент масштабирования Карт Google. По умолчанию этот элемент располагается в левом верхнем углу карты.

Стандартные элементы управления веб-картой Увеличение и уменьшение области просмотраnew GSmallMapControl() — более мелкий элемент масштабирования Карт Google. По умолчанию этот элемент располагается в левом верхнем углу карты.



Стандартные элементы управления веб-картой Увеличение и уменьшение области просмотраnew GSmallZoomControl() — небольшой элемент управления масштабом.

Вот, как могут быть применены эти функции:

function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GLargeMapControl());
}
}

Еще есть два варианта, внешне измененных, вывода элементов управления. Это GLargeMapControl3D и GSmallZoomControl3D.

2. Масштабная линейка.
Для добавления масштабной линейки используют функцию GScaleControl().
Стандартные элементы управления веб-картой Масштабная линейка

function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GScaleControl());
}
}

3. Переключение типов карты.
Для переключения типов карт используют функцию GMapTypeControl(). Она выглядит примерно вот так:
Стандартные элементы управления веб-картой Переключение типов карты

Предусмотрен еще один вариант, GHierarchicalMapTypeControl(). Он заменяет “спутник” и “гибрид” одним пунктом “спутник”. Который, при выборе, дает возможность выбора.
function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GMapTypeControl());
}
}

4. Свертываемая обзорная карта в углу экрана.
Для отображения краткой обзорной карты в углу экрана используется функция
OverviewMapControl().
Стандартные элементы управления веб-картой Свертываемая обзорная карта в углу экрана

function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GOverviewMapControl());
}
}

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

Посмотреть пример всех, выше перечисленных функций

Дополнительную информацию об элементах смотрите в API документации:
http://code.google.com/intl/ru/apis/maps/documentation/controls.html

С уважением, Vasilenko Ivan!

Комментарии — 3 комментария

  1. #9546 kos32 в 6:24, 27 марта 2010:

    Ответить | Цитировать

    свободная альтернатива CloudMade
    http://habrahabr.ru/blogs/startup/51237/

  2. #11840 Аян в 12:36, 27 июня 2011:

    Ответить | Цитировать

    Все отлично!!! Только вот мало… Где можно узнать по больше… К примеру о маркерах…. как построить пройденный путь…. и т.д. и т.п.

  3. #11841 Аян в 12:37, 27 июня 2011:

    Ответить | Цитировать

    Спасибо автору, Все замечательно!!! Только вот мало… Где можно узнать по больше… К примеру о маркерах…. как построить пройденный путь…. и т.д. и т.п.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting