Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
Новости
Последние поступления
Книжный магазин
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
    Читать в Яндекс.Ленте



Примеры Google Maps API №1: Создаем собственные элементы управления

Раздел: Programming / Ajax @ 08.09.2008 | Ключевые слова: google maps api ajax версия для печати

Автор: Левшин Олег
Источник: habrahabr

Итак, я продолжаю делать кросс-посты из моего блога. На этот раз речь пойдет о создании собственных элементов управления для карт на основе Google Maps API.

СОЗДАЕМ СОБСТВЕННЫЕ ЭЛЕМЕНТЫ УПРАВЛЕНИЯ КАРТОЙ


Если Вас чем-то не устраивают стандартные элементы управления картой Google Maps, то с помощью не очень большого по объему кода Вы можете создать свои. Мы будем создавать кнопки управления зумом и кнопки переключения типа карты (обычный и спутник).
Вначале зададим минимальный и максимальный уровни зума:
/*Максимальный и минимальный зум*/
var zoom_max = 10;
var zoom_min = 7;

Теперь объявим функцию, прототип которой будет отвечать, собственно, за кнопки уменьшения/увеличения:
/*Объявление функции*/
function TextualZoomControl() {
}

Затем применяем к прототипу метод initialize(), средствами котрого и создаются наши элементы управления. Этот прототип инициализируется как объект класса GControl():
/*Создаем Div`ы, в которые помещаем элементы управления. По-одному блоку для каждого элемента.*/
TextualZoomControl.prototype = new GControl();
/*Инициализируем прототип*/
TextualZoomControl.prototype.initialize = function(map) {
/*Создаем контейнер для кнопок*/
var container = document.createElement("div");
/*Создаем первую кнопочку*/
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
/*Вписываем название*/
zoomInDiv.appendChild(document.createTextNode("Увеличить"));
/*Если превышен уровень зума, то выводим сообщение*/
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
if(map.getZoom()>zoom_max){
 map.setZoom(zoom_max);
 alert("Куда же еще больше-то?!");
}
});
/*Создаем вторую кнопочку*/
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
/*Вписываем название*/
zoomOutDiv.appendChild(document.createTextNode("Уменьшить"));
/*Если занижен уровень зума, то выводим сообщение*/
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
if(map.getZoom()  map.setZoom(zoom_min);
 alert("И так все прекрасно видно!"); 
}
});
map.getContainer().appendChild(container);
return container;
}

Задаем положение контейнера с кнопками с помощью метода getDefaultPosition(). В данном случае позиция задается относительно левого верхнего угла карты; отступы составляют 7 пикселей:
/*Задаем позицию элементов управления относительно карты*/
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

И, в качестве заключительного штриха, настраиваем внешний вид созданных нами кнопок. Для этого используем метод setButtonStyle_():
/*Задаем стили для элементов*/
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline"
button.style.color = "#000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}

А вот код, иллюстрирующий создание кнопок, отвечающих за смену типа карты:
/*Функция создания элементов управления изменением типа карты*/
function MapTypeControl() {
}
MapTypeControl.prototype = new GControl();
/*Создаем Div`ы, в которые помещаем элементы управления. По-одному блоку для каждого элемента.*/
MapTypeControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var normalDiv = document.createElement("div");
this.setButtonStyle_(normalDiv);
container.appendChild(normalDiv);
normalDiv.appendChild(document.createTextNode("Карта"));
GEvent.addDomListener(normalDiv, "click", function() {
map.setMapType(G_NORMAL_MAP);
});
var satelliteDiv = document.createElement("div");
this.setButtonStyle_(satelliteDiv);
container.appendChild(satelliteDiv);
satelliteDiv.appendChild(document.createTextNode("Спутник"));
GEvent.addDomListener(satelliteDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});
map.getContainer().appendChild(container);
return container;
}
/*Задаем позицию элементов управления относительно карты*/
MapTypeControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
/*Задаем стили для элементов*/
MapTypeControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline"
button.style.color = "#000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}

Теперь нам необходимо все это присоединить к карте:
/*Функция загрузки карты*/
function init() {
if (GBrowserIsCompatible()) {
/*Помещаем карту в div с id=”map”*/
map = new GMap2(document.getElementById("map"));
/*Подключаем кнопки управления зумом*/
map.addControl(new TextualZoomControl());
/*Подключаем кнопки управления сменой типа карты*/
map.addControl(new MapTypeControl());
/*Устанавливаем центр карты*/
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

/*Инициализируем карту*/
window.onload = init;
window.onunload = GUnload;

И весь JavaScript-код целиком:
var zoom_max = 10;
var zoom_min = 7;
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Увеличить"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
if(map.getZoom()>zoom_max){
 map.setZoom(zoom_max);
 alert("Куда же еще больше-то?!");
}
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
/*Вписываем название*/
zoomOutDiv.appendChild(document.createTextNode("Уменьшить"));
/*Если занижен уровень зума, то выводим сообщение*/
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
if(map.getZoom()  map.setZoom(zoom_min);
 alert("Край и так виден, как на ладони!"); 
}
});
map.getContainer().appendChild(container);
return container;
}
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline"
  button.style.color = "#000"
  button.style.backgroundColor = "#fff"
  button.style.font = "small Arial"
  button.style.fontWeight = "bolder"
  button.style.border = "1px solid black"
  button.style.padding = "2px"
  button.style.marginBottom = "3px"
  button.style.textAlign = "center"
  button.style.width = "6em"
  button.style.cursor = "pointer"
}
function MapTypeControl() {
}
MapTypeControl.prototype = new GControl();
MapTypeControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var normalDiv = document.createElement("div");
this.setButtonStyle_(normalDiv);
container.appendChild(normalDiv);
normalDiv.appendChild(document.createTextNode("Карта"));
GEvent.addDomListener(normalDiv, "click", function() {
map.setMapType(G_NORMAL_MAP);
});
var satelliteDiv = document.createElement("div");
this.setButtonStyle_(satelliteDiv);
container.appendChild(satelliteDiv);
satelliteDiv.appendChild(document.createTextNode("Спутник"));
GEvent.addDomListener(satelliteDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});
map.getContainer().appendChild(container);
return container;
}
MapTypeControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
MapTypeControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline"
  button.style.color = "#000"
  button.style.backgroundColor = "#fff"
  button.style.font = "small Arial"
  button.style.fontWeight = "bolder"
  button.style.border = "1px solid black"
  button.style.padding = "2px"
  button.style.marginBottom = "3px"
  button.style.textAlign = "center"
  button.style.width = "6em"
  button.style.cursor = "pointer"
}
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.addControl(new MapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
}
}
window.onload = init;
window.onunload = GUnload;

Множество примеров с описаниями на английском можно найти тут. А работающий пример, описанный в этой статье, есть тут.

Это интересно:








версия для печатиРаспечатать статью


Вернуться в раздел: Programming / Ajax


Реклама:
Читать наc на:

Add to Google
Читать в Яндекс.Ленте






Rambler's Top100
© Copyright 1998-2012 Александр Томов. All rights reserved.