В этой части мы научимся добавлять маркеры на карту для обозначения точек.
Возьмем код из предыдущей заметки «Добавляем элементы управления на карту Google Maps».
Повторяю его здесь.
<!DOCTYPE html “-//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>
<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&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ”
type=”text/javascript”></script>
<script type=”text/javascript”>
function initialize() {if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(”map_canvas”));map.setCenter(new GLatLng(56.32811,44.0), 10);
map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());
}
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_canvas” style=”width: 500px; height: 300px”></div>
</body></html>
В начале, мы заменим элемент управления GLargeMapControl на GSmallMapControl, чтобы увеличить видимую область карты, а также мы закрепим прошлый материал.
Для этого необходимо заменить строку map.addControl(new GLargeMapControl()); на map.addControl(new GSmallMapControl ());
Теперь добавим обозначение маркера на нашу карту.
В начале нам нужно узнать координаты точки, в которую мы собираемся размещать маркер.
Это можно сделать зайдя на сайт Google Maps по адресу http://maps.google.ru
В строке поиска ввести нужны нам адрес, а затем получить ссылку на карту из которой необходимо взять два числа после параметра sll= значения широты (Latitude) и долготаы (Longitude)соответственно. И значение уровня масштаба z=.
Подробнее см. «Показ местоположения на Google Maps без программирования».
После этого нужно добавить строку кода var point = new GLatLng(56.293557,43.99898);, где вместо чисел 56.293557 и 43.99898 нужно подставить ваши значения.
Для добавления маркера на карту служит строка map.addOverlay(new GMarker(point));
По умолчанию для обозначения маркера используется значок G_DEFAULT_ICON, но можно задать и пользовательский значок.
В качестве аргументов конструктора GMarker используются GLatLng и необязательный объект GMarkerOptions.
Маркеры являются интерактивными элементами. По умолчанию они получают, например, события click и служат для вывода информационных окон в приемниках событий.
И так в наш код после задания элементов управления мы добавили две строки
point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point));
Загрузим страницу с примером в браузере и мы увидим следующее
Привожу полный код примера:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<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&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(56.32811,44.0), 10);
map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());
point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point));
}}
</script></head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Теперь давайте попробуем добавить собственный значок в качестве маркера на карту.
Для создания значка нам потребуется два изображения – самого значка и его тень (значек для тени в нашем примере мы не используем).
Теневое изображение необходимо создавать под углом 45 градусов (вверх и вправо) от основного изображения, а левый нижний угол теневого изображения должен располагаться на одной прямой с левым нижним углом основного. Теневые изображения должны быть 24-разрядными PNG-изображениями с альфа-прозрачностью, чтобы передача границ изображения на карте была корректной.
Сначала мы должны определить сам новый значок .
Это делается следующим кодом.
var myexIcon = new GIcon();myexIcon.image = " files/cek_logo.png "; - задаем файл с изображением значка
myexIcon.iconSize = new GSize(38, 29); - размер значка
myexIcon.iconAnchor = new GPoint(19, 14); - смещение значка от точки
myexIcon.infoWindowAnchor = new GPoint(5, 5); - смещение информационного окна
После этого мы определяем объект GMarkerOptions
markerOptions = { icon:myexIcon };
И в строку map.addOverlay (new GMarker(point)); после point через запятую дописываем , markerOptions.
В результате у нас получается следующий код:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(56.32811,44.0), 10);
map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());
var myexIcon = new GIcon();myexIcon.image = "files/cek_logo.png";
myexIcon.iconSize = new GSize(38, 29);
myexIcon.iconAnchor = new GPoint(19, 14);
myexIcon.infoWindowAnchor = new GPoint(5, 5);
markerOptions = { icon:myexIcon };
point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point, markerOptions));
}
}
</script></head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body></html>
Загружаем страницу в браузере и наблюдаем
Комментариев нет:
Отправить комментарий