Начинаем изучать API Яндекс.Карт 2.1.

Автор: | 05.05.2014

29 апреля 2014 года было объявлено, что новая версия API Яндекс.Карт 2.1 выходит из статуса беты и теперь Вы можете на неё безопасно переходить.

В нескольких ближайших заметках я планирую познакомить Вас с данной версией API.

Основные отличительные особенности JavaScript API Яндекс.Карт версии 2.1:

— новый адаптивный дизайн интерфейсов карты;

— мультимаршрутизатор — возможность построения всех возможных маршрутов вместо одного;

— модульная система API. Список всех модулей API приведен в справочнике.

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

Подробную документацию по новой версии API Яндекс.Карт 2.1 можно прочитать здесь.

Давайте рассмотрим простейший пример создания карты с использованием API Яндекс.Карт 2.1.

Вот его код:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Простейший пример создания карты с использованием API Яндекс.Карт 2.1.</title>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
 
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
 
<script type="text/javascript">
var myMap;
 
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
 
function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [56.326944, 44.0075], // Нижний Новгород
        zoom: 12
    });    
}
</script>
</head>
 
<body>
<div id="map" style="width: 100%; height: 90%"></div>
</body>
</html>

Пример создания карты с использованием API Яндекс.Карт 2.1.

Посмотреть пример в действии

В самом начале, мы подключаем API карт по адресу http://api-maps.yandex.ru/

Давайте рассмотрим параметры подробнее:

lang — задается двумя параметрами language_region,

language — двузначный код языка. Указывается в формате ISO 639-1.
region — двузначный код страны. Указывается в формате ISO 3166-1.

На данный момент поддерживаются следующие локали:

lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.

Могут использоваться дополнительные параметры:

coordorder — порядок задания географических координат в функциях API, принимающих на вход пары долгота-широта (например, Placemark).

Возможные значения:

latlong — [широта, долгота] — используется по умолчанию;
longlat — [долгота, широта].

Значение по умолчанию: latlong.

load — Список загружаемых модулей.

Значение по умолчанию: package.full.

mode — Режим загрузки API.

mode=release — код API может быть загружен в упакованном виде для минимизации трафика и скорости исполнения в браузере;
mode=debug — режим загрузки в виде исходного кода.

Значение по умолчанию: release.

Подробнее о параметрах подключения можно прочитать здесь

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

<div id="map" style="width: 100%; height: 90%"></div>

Параметры карты задаются в коде:

myMap = new ymaps.Map(‘map’, {
center: [56.326944, 44.0075], // центр карты Нижний Новгород
zoom: 12 — уровень масштаба
});

Создавать карту следует после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по id. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().

Функция ready вызовется тогда, когда API будет загружен и DOM сформирован

ymaps.ready(init);

function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
myMap = new ymaps.Map(‘map’, {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: [56.326944, 44.0075], // Нижний Новгород
zoom: 12
});

}

По умолчанию на карте отображаются все доступные элементы управления.

Тип карты — схема.

API предоставляет пять встроенных типов карт:

Схема (yandex#map) — по умолчанию;
Спутник (yandex#satellite);
Гибрид (yandex#hybrid);
Народная карта (yandex#publicMap);
Гибрид народной карты (yandex#publicMapHybrid).

Пример с определением типа карты Спутник

Код примера:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Задем тип карты - Спутник. Пример создания карты с использованием API Яндекс.Карт 2.1.</title>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
 
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
 
<script type="text/javascript">
var myMap;
 
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
 
function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [56.326944, 44.0075], // Нижний Новгород
        zoom: 12,
		type: 'yandex#satellite'
    });
 
}
</script>
</head>
 
<body>
<div id="map" style="width: 100%; height: 90%"></div>
 
</body>
</html>

Задем тип карты - Спутник. Пример создания карты с использованием API Яндекс.Карт 2.1.

Посмотреть пример в действии

Как я уже говорил, на карту по умолчанию на карту добавляется стандартный набор элементов управления ‘mediumMapDefaultSet’.

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

Вот код примера элементами управления масштабом и типом карт.

Код примера:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Элементы управления картой. Пример создания карты с использованием API Яндекс.Карт 2.1.</title>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
 
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
 
<script type="text/javascript">
var myMap;
 
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
 
function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [56.326944, 44.0075], // Нижний Новгород
        zoom: 12,
		controls: ['zoomControl', 'typeSelector']
    });
 
}
</script>
</head>
 
<body>
<div id="map" style="width: 100%; height: 90%"></div>
 
</body>
</html>

Элементы управления картой. Пример создания карты с использованием API Яндекс.Карт 2.1.

Посмотреть пример в действии

Существует возможность задания поведения карты, используя параметр behaviors.

Задавая его значения, мы можем включать или отключать различные параметры поведения карты:

масштабирование карты двойным щелчком кнопки мыши;

перетаскивание карты с помощью мыши либо одиночного касания;

масштабирование карты при выделении области левой кнопкой мыши;

масштабирование карты мультисенсорным касанием;

масштабирование карты при выделении области правой кнопкой мыши;

измерение расстояния;

масштабирование карты колесом мыши.

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Управление поведением карты. Пример создания карты с использованием API Яндекс.Карт 2.1.</title>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
 
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
 
<script type="text/javascript">
var myMap;
 
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
 
function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [56.326944, 44.0075], // Нижний Новгород
        zoom: 12
    });
 
	myMap.behaviors.disable('scrollZoom');
 
}
</script>
</head>
 
<body>
<div id="map" style="width: 100%; height: 90%"></div>
 
</body>
</html>

Посмотреть пример в действии

Возможно изменение параметров карты после ее создания.

Включаем возможность масштабирования колесиком мыши

myMap.behaviors.enable("scrollZoom");

Выключаем

myMap.behaviors.disable("scrollZoom");

Устанавливаем новый тип карты Народная

myMap.setType(‘yandex#publicMap’);

Устанавливаем новый центр карты

myMap.setCenter([57.767265, 40.925358]);

Загрузить архив с файлами примеров

На этом пока все.

Продолжение следует…

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

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