<!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.Zoom – элемент масштабирования, который позволяет менять разрешение карты с определенным шагом;
YMaps.SmallZoom – компактный элемент масштабирования (без слайдера, только кнопки уменьшения и увеличения масштаба),
YMaps.MiniMap – элемент "обзорная карта" – карта показываемой местности, масштаб которой на несколько пунктов меньше основной;
YMaps.TypeControl – элемент управления, позволяющий выбрать различные типы карты (например, гибрид или спутник);
YMaps.ScaleLine – элемент карты "Масштабная линейка" (scale line), позволяющий измерять расстояние между объектами, не прибегая к вычислениям.
Все элементы управления основаны на классе 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
Крайне благодарен автору за содержательную информацию предложенную в уважительной манере, что практически не встречается среди русскоязычных сайтов.
ОтветитьУдалить