Компьютерная диагностика двигателя автомобиля (адаптер К-линии)

Скачать игру Крыло-Гром (Wing-Thunder) бесплатно

Google Maps: строим карты сами

Автор: Владислав Демьянишин

Встраиваем Google Maps на сайт

Воспринимая на слух название города Адлер, невольно возникают ассоциации с Германией, а города Джанкой с Таджикистаном. Но, чтобы точно знать, где находятся эти и другие замечательные уголки нашей прекрасной и, пока еще, цветущей планеты, нам всегда поможет карта или глобус.

Замечательные и талантливые люди из Google подарили нам Google Map – карту планеты, где можно найти практически любой населенный пункт. Даже наша родная Украина довольно прилично детализирована в этой системе.

Но все это лишь на сервисе Google. А как аналогичную карту встроить, например, на свой сайт? Да проще некуда. Надо лишь разбираться в HTML и Javascript, а остальное за Google Map API.

Google Maps API

Google Map API – сервис, предоставляемый Google для встраивания и работы с картами на вашем сайте. Позволяет отмечать точки на карте (ставить маячки), а так же производить поиск и просмотр карты непосредственно на сайте.

Если желаете быстро войти в курс дела, рекомендую почитать http://wiki.pws.ru/index.php/Google_Map_API. Полная справка по Google Map API (увы, почему-то на английском) http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html. Справка на русском в PDF: www.sterno.ru/rit2008/googlemaps/Google-Maps-cheet-sheet.pdf. Исчерпывающая официальная документация на русском

http://code.google.com/intl/ru/apis/maps/documentation/mapplets/guide.html

С чего начать?

Чтобы работать с картами Google на своем сайте, нужно получить ключ API. Для этого сначала нужно зарегистрировать аккаунт на Google (если это еще не сделано), а затем перейти на страницу http://code.google.com/intl/ru_ALL/apis/maps/signup.html.

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

Ключ может иметь такой вид:

ABQIAAAA4WH5PIrQfCRa762-p1YVXxSUgxVXCnZeaclVeWKDOWdbdybHqhSH5l_c0C-Ts0Vbu71rPc-0dgtnoA

Полученный при регистрации ключа пример можно использовать на сайте для проверки правильной работы с Google Map.

Добавим карту на свой сайт

Предположим, что аккаунт на Google мы с вами уже завели. Кстати, он нам пригодится и для публикаций видео на YouTube. Также мы получили и ключ для работы с Google Map API.

Следует отметить, что если полученный для одного сайта ключ применять на другом сайте, то карта все равно будет работать, но при загрузке веб-страницы с картой будет появляться соответствующее сообщение “Для этого веб-сайта требуется другой ключ API Карт Google. Новый можно получить на странице http://code.google.com/apis/maps/signup.html”.

Итак, начнем и для этого составим следующую веб-страничку:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=наш_ключ" type="text/javascript"></script>
<script type="text/javascript">
function GMapInit() {
// Инициализация класса Google Maps и расположение карты в слое GMapContainer
var map = new GMap2(document.getElementById("GMapContainer"));
// Задаем центр выводимой области карты
// Широта, долгота и коэффициент увеличения цента (обязательный параметр)
map.setCenter(new GLatLng(50.46275,30.522079), 11);
}
</script>

</head>
<body onload="GMapInit()">
<div style="width: 700px; height: 500px" id="GMapContainer"></div>
</body>
</html>

В теге META настоятельно рекомендую указывать кодировку. Затем в теге SCRIPT подключаем библиотеку Google Map API с указанием нашего ключа. После этого начинаем программировать сами.

Рис. 1

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

Таким местом в данном случае нам послужит тег DIV с ID=”GMapContainer”.

Функция GMapInit выполняет инициализацию карты и привязку ее к контейнеру командой GMap2, в результате вызова которой получаем экземпляр объекта map, с которым будем работать далее.

Далее, необходимо задать исходный (видимый) сектор на карте. Для этого командой map.setCenter указываем координаты (широту и долготу) места на планете и коэффициент приближения (масштаб).

Так, для города Киева ставим координаты 50.46275,30.522079. Чем больше коэффициент, тем больше масштаб и тем ближе к зрителю объекты на местности.

Элементы управления

Кое-что у нас уже получается. Но по нашей карте можно только перемещаться в двумерной координатной системе. А как насчет масштабирования или переключения на спутниковый режим или гибридный?

Их есть у меня, вернее у Google Map API ;)

Как только мы создали карту командой GMap2, вслед за ней можем включить элементы навигации по карте:

// Блок навигации и масштабирования карты

map.addControl(new GLargeMapControl());

Если же нам нужно что-то покрасивее и функциональнее (масштабирование колесиком мышки), то:

// Навигация с анимацией при масштабировании колесиком мышки

map.setUIToDefault();

Чтобы можно было переключаться между режимами отображения карты (Карта, Спутник, Гибрид), добавляем следующую команду:

// Кнопки режима карты (Карта, Спутник, Гибрид)

map.addControl(new GMapTypeControl());

Что делать, если необходимо задать исходный режим отображения карты? Для этого нам понадобится, например, команда:

// Включаем тип карты "Спутник"

map.setMapType(G_SATELLITE_MAP);

Если в данной команде указать в качестве аргумента константу, например, G_HYBRID_MAP, то получим гибридную карту, т.е. поверх спутниковой будут наложены транспортные магистрали с обычной карты.

Режим обычной карты включается константой G_NORMAL_MAP.

Ну а чтобы желаемый город или улицу можно было найти по названию, можно добавить панель поиска Google прямо на карту:

// Панель Google для поиска улиц на карте

map.enableGoogleBar();

В итоге получим нечто этакое (рис. 2) в спутниковом режиме с элементами навигации и поиска. Как видно на иллюстрации, национальный спортивный комплекс Олимпийский в Киеве еще далек от готовности принимать Чемпионат Европы по футболу 2012 – всюду какие-то вагончики, грейдеры, краны, грузовички,… L

Рис. 2

Добавляем маркер на карту

Карта уже есть, но на ней ничего не отмечено. Давайте отметим штаб-квартиру нашего журнала - город Киев. Только не спрашивайте, как я определил точные координаты.

Для определения координат я использовал систему администрирования (своего рода карта с прицелом и отображением точных координат прицела, рис. 3), которую в 2009 году разработал для сайта http://www.netbaryerov.org.ua/map/index.php (рис. 4).

Рис. 3

Рис. 4

Чтобы добавить маркер, после вызова команды map.setCenter в Java-скрипт поставим следующие строки:

// Задаем переменную, содержащую настройки создаваемого маркера

var markerOptions = { title:"Это центр Киева" };

// Устанавливаем маркер в заданные координаты

var marker = new GMarker(new GLatLng(50.417358,30.475594), markerOptions);

// Устанавливаем обработчики события нажатия на маркер

GEvent.addListener(marker, "click", function() {

// Открытие информационного окна с текстом

marker.openInfoWindowHtml("Офис журнала «Компьютер» <BR> ул.П.Радченко,4");

});

map.addOverlay(marker);

Параметр title будет обеспечивать появление выпадающей подсказки при наведении курсора мыши на маркер. Командой GMarker создаем экземпляр объекта маркера. Собственно, комментарии говорят сами за себя. После того, как все настройки маркера сделаны и к нему привязано событие (хотя это и не обязательно) командой GEvent.addListener, маркер можно добавить на карту командой map.addOverlay.

При клике на маркере будет появляться информационное окно с текстом, указанным в команде marker.openInfoWindowHtml (рис. 5).

Рис. 5

Своя картинка для маркера

Создавать маркер стандартного вида мы уже научились. Но как это бывает, возникает необходимость выделить маркер на карте. Для этого следует нарисовать картинку, желательно в формате PNG со слоем прозрачности. В следующем коде:

var myIcon = new GIcon();

// задаем файл с изображением значка

myIcon.image = "comp_marker.png";

myIcon.iconSize = new GSize(51, 64); // размер значка

myIcon.iconAnchor = new GPoint(51, -64); // смещение значка от точки

myIcon.infoWindowAnchor = new GPoint(45, 5); // смещение информационного окна

// После этого определяем объект GMarkerOptions

var markerOptions = { icon:myIcon };

map.addOverlay(new GMarker(new GLatLng(50.417358,30.475594), markerOptions));

командой GIcon мы создаем экземпляр объекта myIcon картинки для маркера. Затем указываем имя файла картинки. В коде веб-страницы путь к файлу лучше указывать полный, например, http://www.mysite.com/icon.png.

Картинка может иметь любой размер, но логичнее делать его разумным, например, в пределах 64x64 пикселя. В нашем случае картинка comp_marker.png (рис. 6) имеет размер 51x64 (задаем командой GSize) в свойстве myIcon.iconSize.

Рис. 6

Исходя из ее размеров командой GPoint в свойстве myIcon.iconAnchor задаем смещение значка маркера в пикселях от точки на карте, соответствующей координатам маркера, чтобы маркер не перекрывал собой точку, на которую указывает. В нашем случае человечек-компьютер указывает рукой на точку.

Для корректного позиционирования информационного окна задаем смещение (в пикселях) в свойстве myIcon.infoWindowAnchor. Для обычного стандартного маркера это смещение соответствует (5,5).

Далее командой map.addOverlay добавляем маркер на карту. При этом налету создаем экземпляр маркера и передаем его в качестве аргумента. То, что должно получиться, выглядит, как показано на рис. 7.

Рис. 7

Следует учесть, что в старых версиях Internet Explorer могут возникнуть проблемы с отображением полупрозрачных PNG. Для этого есть методики устранения проблемы.

Ставим маркеры пачками

Один маркер – это хорошо. Но этим, думаю, редко, кто пожелает ограничиваться. Тогда предлагаю рассмотреть следующий пример. Как и в предыдущих примерах, уже известный код инициализации опускаю. Во все том же теге SCRIPT объявляем ассоциативный массив.

На самом деле, тем нашим читателям, которые знакомы с языком Javascript, должно быть известно, что в нем отсутствует такое понятие как ассоциативный массив, но имеется возможность объявлять объекты с полями.

Как раз такой массив объектов и показан в следующем примере. Но это не помешает нам использовать этот массив city в качестве ассоциативного:

// Массив с данными для маркеров

var city = [

{'x' : 50.46275, 'y' : 30.522079, 'comment' : 'город Киев'},

{'x' : 50.247205, 'y' : 28.652344, 'comment' : 'город Житомир'},

{'x' : 49.84861, 'y' : 24.01062, 'comment' : 'город Львов'},

{'x' : 49.592909, 'y' : 34.557495, 'comment' : 'город Полтава'}

];

// Функция создания маркера с указанными параметрами

function createMarker(x, y, comment) {

// Создаем точку на карте с координатами x и y

var point = new GLatLng(x, y);

// Создаем маркер в указанной точке

var marker = new GMarker(point);

// Добавляем обработчик события нажатия на маркер

GEvent.addListener(marker, "click", function() {

// При нажатии открывается информационное окно с заданным текстом

marker.openInfoWindowHtml(comment);

});

return marker;

}

После массива объявлена функция createMarker, которая поможет сделать процедуру создания маркера более прозрачной и лаконичной. Теперь нам остается лишь добавить цикл перебора элементов всего массива маркеров city в конец тела функции GMapInit:

// Добавляем маркеры

for(i in city) map.addOverlay(createMarker(city[i]['x'],city[i]['y'],city[i]['comment']));

Получилась вот такая карта Украины (рис. 8).

Рис. 8

Определение координат

Чтобы удобно и оперативно определять координаты объектов на карте, можно сделать специальную карту с отображением “прицела” в центре контейнера карты и с отслеживанием перемещения карты.

Для этого может послужить такая функция Google Map API как map.getCenter, позволяющая получить геометрические координаты центра карты в величинах типа GLatLng. Аналогичным образом можно отслеживать и масштаб функцией map.getZoom.

Ну а пока такой специальной карты у вас нет, можете воспользоваться таблицей 1, где перечислены координаты областных центров Украины, либо зайти на сайт www.astrolab.ru/cgi-bin/sdg.cgi и получить координаты любого населенного пункта планеты, воспользовавшись алфавитным указателем.

Таблица 1. Координаты областей Украины с выравниванием по областным центрам

Область	Широта	Долгота
Киевская	50.448643	30.522117
Винницкая	49.23105053355255	28.473472595214844
Волынская (Луцк)	50.75763563148197	25.351810455322266
Донецкая	48.00852989514704	37.80773162841797
Днепропетровская	48.469279317167164	35.032310485839844
Житомирская	50.258949209694826	28.67259979248047
Закарпатская (Ужгород)	48.61991714878391	22.296581268310547
Запорожская	47.83874021204476	35.15350341796875
Ивано-Франковская	48.91708480384719	24.714431762695312
Кировоградская	48.50682443050761	32.25088119506836
Крым (Симферополь)	44.980342	34.057617
Луганская	48.56308998729519	39.31663513183594
Львовская	49.835768138126134	24.029159545898438
Николаевская	46.956706848615305	32.01948165893555
Одесская	46.458200503067076	30.710735321044922
Полтавская	49.588235750419855	34.5549201965332
Ровненская	50.62365733358117	26.248226165771484
Сумская	50.913207747893566	34.7966194152832
Тернопольская	49.55450504614626	25.59986114501953
Харьковская	49.98434462650245	36.269989013671875
Херсонская	46.64495810629936	32.60793685913086
Хмельницкая	49.41465875985922	26.99169158935547
Черкасская	49.42180572416235	32.05432891845703
Черновицкая	48.28707663414987	25.93048095703125
Черниговская	51.49987377454688	31.276874542236328

А как же Луна, Марс и другие планеты?

Действительно, а как же другие планетоиды нашей солнечной системы? Да нет ничего проще! Тем более, что специалисты Google уже давно позаботились и об этом ;)

Для этого вам понадобятся знания, которые вы получили уже в этой статье и новый код уже знакомой вам функции GMapInit:

function GMapInit() {

var map = new GMap2(document.getElementById("GMapContainer"), { mapTypes : G_MOON_MAP_TYPES });

map.addControl(new GLargeMapControl());

map.setCenter(new GLatLng(-65,30), 2);

}

Где всего-то надо в вызов функции GMap2 добавить указание типа карты. Это:

Для Луны (рис. 9):

G_MOON_MAP_TYPES

G_MOON_ELEVATION_MAP

G_MOON_VISIBLE_MAP

Для Марса (рис. 10):

G_MARS_MAP_TYPES

G_MARS_ELEVATION_MAP

G_MARS_INFRARED_MAP

G_MARS_VISIBLE_MAP

Для звездного неба (рис. 11):

G_SKY_MAP_TYPES

G_SKY_VISIBLE_MAP

Рис. 9 Луна

Рис. 10 Марс

Рис. 11 Звездное небо

Ну вот, теперь у вас есть все необходимое, чтобы сделать собственный картографический сайт не хуже какого-то там www.astrolab.ru или http://luna.ua, а может где-то и лучше ;)

Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.

Журнал > Программирование > Google Maps: строим карты сами

При использовании материалов сайта активная ссылка на http://sulfurzona.ru обязательна.

Весь оригинальный контент защищен сервисом Яндекс Вебмастер и сервисами проверки уникальности текста content-watch.ru, text.ru, advego.ru, etxt.ru, copyscape.com.