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 карт по адресу 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> |
Как я уже говорил, на карту по умолчанию на карту добавляется стандартный набор элементов управления ‘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> |
Существует возможность задания поведения карты, используя параметр 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]);
Загрузить архив с файлами примеров
На этом пока все.
Продолжение следует…