Стандартные элементы управления веб-картой
Среда, Март 17, 2010 21:52 
В предыдущей статье «Начинаем использование API Google карт» я рассказал о добавлении веб-карты Google на вашей странице.
Сейчас мы рассмотрим предыдущий пример более подробно и я расскажу вам о добавлении элементов управления этой картой. А именно:
- Увеличение и уменьшение области просмотра.
- Масштабная линейка.
- Переключение типов карты.
- Свертываемая обзорная карта в углу экрана.
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() — небольшой элемент управления масштабом.
Вот, как могут быть применены эти функции:
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().
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(). Он заменяет «спутник» и «гибрид» одним пунктом «спутник». Который, при выборе, дает возможность выбора.
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GMapTypeControl());
}
}
4. Свертываемая обзорная карта в углу экрана.
Для отображения краткой обзорной карты в углу экрана используется функция
OverviewMapControl().
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GOverviewMapControl());
}
}
Использование данных функций не является обязательным. Вы можете выбирать, что отображать поверх вашей карты.
Посмотреть пример всех, выше перечисленных функций
Дополнительную информацию об элементах смотрите в API документации:
Loading ...
kos32 сообщил:
Март 27th, 2010 6:24
свободная альтернатива CloudMade