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

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

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

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

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


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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>API карт Google на JavaScript</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAGxQtTxaZpwHctYsJ45wffRT-GAwbLO2IYrqDc-vxnyEJHchegBRA3TVCEOa-ru5xvrdOuhut5GEudg" type="text/javascript"></script>
<script type="text/javascript">
function initialize(){ // Функция, которая будет вызвана при загрузке страницы.
if (GBrowserIsCompatible()) { // Проверяем совместимость браузера с картой
var map = new GMap2(document.getElementById("map")); // Создаем объект карты, где "map" - это id блока в котором выводить нашу карту.
map.setCenter(new GLatLng(52.424198,30.962219), 10); // Устанавливаем координаты карты. 10 - масштаб.
}
}
</script>
<style>
body{font-family:Trebuchet MS, Trebuchet, Trebuchet Source, Arial;}
#map{margin:0 auto;}
</style>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px;border:1px solid #eee"></div>
</body>
</html>

Рассмотрим все по порядку.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAGxQtTxaZpwHctYsJ45wffRT-GAwbLO2IYrqDc-vxnyEJHchegBRA3TVCEOa-ru5xvrdOuhut5GEudg" type="text/javascript"></script> — содержит url файла, который включает в себя API Google map.

<div id="map" style="width:500px;height:300px;border:1px solid #eee"></div> — объявляем место отображения карты.

<body onload="initialize()" onunload="GUnload()"> — при загрузке страницы, запускаем функцию показа нашей карты.
О самом 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

    habrahabr.ru/blogs/startup/51237/

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

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

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

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

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting