Яндекс. Карты – добавляем элементы управления

Автор: | 21.03.2009
7 комментариев

В заметке Начинаем изучать API Яндекс.Карт я уже представлял Вам пример кода простой карты, повторяю его текст:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head>
<meta http-equiv=”Content-Type” content=”text/html” />
<script src=”http://api-maps.yandex.ru/0.8/?key= 
AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”
type=”text/javascript”></script>
<script type=”text/javascript” charset=”utf-8?>
var map;
function init () {
map = new YMaps.Map( document.getElementById(”YMapsID”) );
map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,
 
YMaps.MapType.MAP);
}
</script>
</head>
 
<body onload=”init();”>
 
<div id=”YMapsID” style=”height:400px; width:600px;”></div>
 
</body>
 
</html>

Давайте рассмотрим подробно что здесь есть, а затем разберемся с тем, как добавить на карту элементы управления.

В начале в секции HEAD документа располагается код:

<script src=”http://api-maps.yandex.ru/0.8/?key= AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==” type=”text/javascript”></script>

Он задает ключ доступа к API Яндекс.Карт, по указанному URL находится JavaScript файл API Яндекс.Карт, содержащий все необходимые символы и определения для обращения к API. Каждая страница, использующая карты Яндекса, должна содержать подобный скрипт-блок.

Как получить ключ я уже рассказывал в заметке Начинаем изучать API Яндекс.Карт.

Для кооректной работы с браузером Internet Explorer 8 необходимо использовать следующий метатег:

<meta http-equiv=»X-UA-Compatible» content=»IE=7″/>

Для показа карты на странице резервируется место под нее, за это отвечает код:

<div id=”YMapsID” style=”height:400px; width:600px;”></div>,

расположенный в разделе BODY. Карта определяется специальным классом YMaps.Map.

Каждый экземпляр этого класса может представлять одну карту на странице. Для создания нового экземпляра используется оператор new. При создании экземпляра карты требуется указать DOM-элемент (обычно это элемент <div>), который послужит контейнером для карты.

В нашем примере карта определяется строкой кода: map = new YMaps.Map( document.getElementById(”YMapsID”) );

Затем в следующей строке происходит инициализация карты с помощью метода setCenter() с указанием географических координат центра карты (44.0,56.32811), необходимого масштаба (13) и типа карты (YMaps.MapType.MAP).

Параметры масштаба и типа карты являются не обязательными и если они не заданы, то используются значения по умолчанию.

API Яндекс.Карт поддерживает показ трех различных типов карт:

  • MAP — тип карты «Схема». Схематичное отображение объектов местности. Используется по умолчанию.
  • SATELLITE — тип карты «Спутник». Спутниковая карта местности.
  • HYBRID — тип карты «Гибрид». Спутниковая карта местности с нанесенными названиями географических объектов.

Для указания типа карты используется метод setType() объекта YMaps.Map:

map.setType(YMaps.MapType.SATELLITE);

Также возможно создание новых типов карты.

Масштаб карты (точнее, уровень масштабирования) определяет разрешение текущего изображения. Уровень масштабирования Яндекс.Карт принимает значения от 1 (на карте отображены все континенты) до 17 (видны отдельные здания).

Загрузка карты производится по событию onLoad, после того, как браузер отобразил остальные элементы страницы и уже выстроил DOM. Таким образом гарантируется, что контейнер карты <div> не окажется пустым в момент построения объектной модели и страница отобразится корректно.

Это строка <body onload=”init();”>

Если загрузить страницу с примером в браузере, мы увидим следующие:

Пример карты

Мы видим карту, но на ней нет элементов управления.

Давайте их добавим.

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

YMaps.ToolBar – панель инструментов с кнопками, позволяющими перемещать карту, увеличивать ее, а также измерять расстояние на карте с помощью специальной линейки;

YMaps.ToolBar

YMaps.Zoom – элемент масштабирования, который позволяет менять разрешение карты с определенным шагом;

YMaps.Zoom

YMaps.SmallZoom – компактный элемент масштабирования (без слайдера, только кнопки уменьшения и увеличения масштаба),

YMaps.SmallZoom

YMaps.MiniMap – элемент «обзорная карта» – карта показываемой местности, масштаб которой на несколько пунктов меньше основной;

YMaps.MiniMap

YMaps.TypeControl – элемент управления, позволяющий выбрать различные типы карты (например, гибрид или спутник);

YMaps.TypeControl

YMaps.ScaleLine – элемент карты «Масштабная линейка» (scale line), позволяющий измерять расстояние между объектами, не прибегая к вычислениям.

YMaps.ScaleLine

Все элементы управления основаны на классе YMaps.IControl.

Добавим на нашу карту следующие элементы: YMaps.TypeControl, YMaps.ToolBar, YMaps.Zoom, YMaps.MiniMap, YMaps.ScaleLine.

Для этого необходимо добавить следующие строки кода, после строки map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP);

map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());

Загрузим страницу с полученным кодом в браузере и увидим следующее

Пример карты с элементами управления

В заключении заметки привожу новый код полностью:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html” />
<script src=”http://api-maps.yandex.ru/0.8/?key=
AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”
type=”text/javascript”></script><script type=”text/javascript” charset=”utf-8″>
var map;
function init () {
map = new YMaps.Map( document.getElementById(”YMapsID”) );
map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,
YMaps.MapType.MAP);map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());}
</script>
</head>
 
<body onload=”init();”>
<div id=”YMapsID” style=”height:400px; width:600px;”></div>
</body>
 
</html>

Подробнее узнать об элементах управления API Яндекс.Карт можно по адресу: http://api.yandex.ru/maps/jsapi/doc/dg/concepts/map_controls.xml

Яндекс. Карты – добавляем элементы управления: 7 комментариев

  1. Alex

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

    Ответить ↓
  5. Дедушка Джо

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

    Ответить ↓

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *