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

Автор: | 14.05.2012
8 комментариев

18 апреля 2012 года была выпущена новая версия JavaScript API Яндекс.Карт 2.0.

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

В нескольких заметках на блоге, я хочу рассказать Вам о том, как можно ее использовать в картографических проектах.

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

— Новый дизайн (элементов управления, меток и панели пробок; возможность выбрать язык интерфейса);
— Высокая скорость загрузки (возможность модульной загрузки API);
— Новые инструменты (canvas, кластеризация, элементы HTML5 и CSS3);
— Поддержка мобильных устройств;
— Отсутствие API-ключа для привязки к домену

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

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

Вот его код:

<!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; charset=utf-8" />
<title>Пример карты с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

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

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

И передаем набор необходимых параметров для подключения:

— lang — язык (обязательный параметр);
— key — API-ключ (не обязательно);
— load — пакеты, которые необходимо загрузить. По умолчанию принимает значение package.full;
— mode — режим работы с API. По умолчанию release (код обфусцирован, ошибки API не генерируются);
— coordorder — порядок координат. По умолчанию принимает значение latlong (широта, долгота);
— ns — пространство имен. По умолчанию ymaps.

В примере мы передаем только два параметра: load=package.full и lang=ru-RU.

API не включает в себя библиотеку jQuery.

Рассмотрим параметры более подробно.

Параметр lang — язык является обязательным и может принимать значения: ru-RU — русский и uk-UA — украинский, en-BR — английский и tr-TR — турецкий (только для карты Турции) .

Параметр load — загружаемые пакеты:

package.full — полная сборка API Яндекс.Карт;
package.standard — стандартная сборка API Яндекс.Карт;
package.map — базовая функциональность — карта, поведения карты, слои;
package.controls — элементы управления карты (кроме SearchControl и TrafficControl);
package.search — инструменты поиска по карте — провайдеры геокодирования и SearchControl;
package.geoObjects — геообъекты (точки, ломаные, многоугольники, круги, прямоугольники) на карте;
package.clusters — кластеризация;
package.traffic — пробки;
package.route — сервис маршрутизации;
package.geoXml — инструменты для работы с YMapsML, KML и GPX;
package.editor — редактор геообъектов

Состав пакетов можно посмотреть в документации

Параметр mode — режим работы с API.

mode=release — код обфусцирован, ошибки API не генерируются;
mode=debug — режим отслеживания ошибок

Параметр coordorder задает порядок координат:

coordorder= latlong — широта, долгота по умолчанию;
coordorder=longlat — долгота, широта

Параметр ns позволяет задавать свое пространство имен, по умолчанию ymaps.

Например, ns=ym

Тогда основная часть кода будет иметь вид:

<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ym.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ym.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
        }
    </script>

При инициализации карты, указав дополнительный параметр type, мы можем задать тип нашей карты.

Параметр type может принимать следующие значения:

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

Пример определения типа карты:

<!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; charset=utf-8" />
<title>Пример определение типа карты с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13,
					// Тип карты
					type: "yandex#satellite"
                });
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

<!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; charset=utf-8" />
<title>Включаем возможность масштабирования колесиком мыши - с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13,
					// Включаем возможность масштабирования колесиком мыши
					behaviors: ["scrollZoom"]
                });
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

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

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

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

myMap.behaviors.enable("scrollZoom");

Выключаем

myMap.behaviors.disable("scrollZoom");

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

myMap.setType(‘yandex#publicMap’);

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

myMap.setCenter([50.45, 30.5 ], 12);

Добавляем элементы управления на карту

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

Код примера:

<!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; charset=utf-8" />
<title>Пример карты с элементами управления JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
			//Добавляем элементы управления	
			 myMap.controls
                // Кнопка изменения масштаба
                .add('zoomControl')
                // Список типов карты
                .add('typeSelector')
                // Кнопка изменения масштаба - компактный вариант
                // Расположим её справа
                .add('smallZoomControl', { right: 5, top: 75 })
                // Стандартный набор кнопок
                .add('mapTools')	
				//Линейка масштаба
				 .add(new ymaps.control.ScaleLine())
				 //Обзорная карта, с заданным типом
				 .add(new ymaps.control.MiniMap({
                    type: 'yandex#publicMap'
                }));
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

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

Элементы управления добавляются с помощью поля controls, ссылающегося на коллекцию элементов управления картой.

Добавление элемента в коллекцию производится с помощью метода add().

Мы можем позиционировать элементы управления, задавая параметры смещения в пикселях относительно верха (right), низа (bottom), левой (left) и правой (right) стороны окна с картой.

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

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

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

Начинаем изучать API Яндекс.Карт 2.0: 8 комментариев

  1. Денис

    Как насчёт разработки и добавления собственных контролов?

    Ответить ↓
    1. admin Автор записи

      Напишу чуть позже. Нужно с начала про обработку событий рассказать.
      А иначе будет непонятно.

      Ответить ↓
  2. Анатолий

    Здравствуйте!
    Не получается с этими примерами. У Вас нет видео как делали? Может хостинг должен поддерживать карты 2.0? А может это только для Джумлы.
    Я делал примеры из Начинаем изучать API Яндекс.Карт — там все получалось. Ваш код вставлял прямо на страничке ворд пресса. Там все получалось но балуны были сильно растянутые и кривые. Как устранить не нашел и полез в карты 2.0, а они вообще не ставятся. Вот пример: http://www.3bpr.ru/%D0%BC%D1%8B-%D0%BD%D0%B0-%D0%BA%D0%B0%D1%80%D1%82%D0%B5/ (метка чуть ниже и левей красноярска)

    Ответить ↓
    1. admin Автор записи

      Это проблема со стилями в шаблоне WordPress. Нужно не использовать глобальные стили. Свои примеры я делал используя простую html-страницу без встраивания в конкретную CMS

      Ответить ↓
  3. Анатолий

    а не дадите ссылку как делать с нуля сайт — не ворд. пресс. Как у Вас обычный хмл

    Ответить ↓

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

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