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

30.04.2013

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

Подключение API

Подключение API производится с помощью загрузки внешнего JavaScript-файла: 

<script src="https://api-maps.yandex.ru/2.0-stable/?apikey=YOUR_APY_KEY&load=package.full&lang=ru-RU" type="text/javascript"></script>

Могут быть загружены как все компоненты API, так и отдельные пакеты, содержащие только необходимые компоненты. Это позволяет регулировать объем трафика, передаваемого клиентскому приложению.

Контейнер для карты

В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div с заданной шириной и высотой). Карта заполнит этот элемент полностью. Уникальный идентификатор (id) контейнера будет использоваться для получения указателя на контейнер карты. 

<div id="myMap" style="width: 700px; height: 700px;"></div>

Создание карты

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

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map ('myMap', {
        center: [55.75, 37.61],
        zoom: 10
    });
}

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

  • yandex#map — тип карты «схема» (по умолчанию);
  • yandex#satellite — тип карты «спутник»;
  • yandex#hybrid — тип карты «гибрид»;
  • yandex#publicMap — тип карты «народная карта»;
  • yandex#publicMapHybrid — тип карты «народный гибрид».
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map ('myMap', {
        center: [55.75, 37.61],
        zoom: 10,
        type: 'yandex#hybrid'
    });
}

Добавление метки на карту

В API метки реализуются с помощью класса Placemark. Перед тем как добавить метку на карту, создайте экземпляр этого класса. При создании метки вы можете задать текст её иконки, а также текст балуна, который откроется при щелчке кнопкой мыши на этой метке. 

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map ('myMap', {
        center: [55.75, 37.61],
        zoom: 3
    });
    var myPlacemark = new ymaps.Placemark([55.76, 37.64], { 
        iconContent: 'Москва', 
        balloonContent: 'Столица России' 
    }, {
        preset: 'twirl#blueStretchyIcon'
    });
}

После того как метка была создана, её можно добавить на карту. Добавление объектов на карту осуществляется через их добавление в глобальную коллекцию объектов карты myMap.geoObjects: 

myMap.geoObjects.add(myPlacemark);

Еще один пример добавления метки: 

var myPlacemark = new ymaps.Placemark([55.7, 37.6], {
    // Свойства
    iconContent: 'Щелкни по мне',
    balloonContentHeader: 'Заголовок',
    balloonContentBody: 'Содержимое <em>балуна</em>',
    balloonContentFooter: 'Подвал'
}, {
    // Опции
    preset: 'twirl#blueStretchyIcon' // иконка растягивается под контент
});

Стандартные элементы управления

Теперь изменим код, чтобы на карте отображались стандартные элементы управления:

  • Панель инструментов со стандартным набором кнопок: перетягивание карты (drag), увеличение выделенной области, измерение расстояний.
  • Переключатель отображаемого типа карты.
  • Изменение коэффициента масштабирования.
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map ('myMap', {
        center: [55.75, 37.61],
        zoom: 3,
        type: 'yandex#satellite'
    });
    myMap.controls
        .add('mapTools')       // стандартные кнопки
        .add('typeSelector')   // переключатель типа карты
        .add('zoomControl');   // изменение масштаба
    var myPlacemark = new ymaps.Placemark([55.75, 37.61], { 
        iconContent: 'Москва', 
        balloonContent: 'Столица России' 
    }, {
        preset: 'twirl#blueStretchyIcon'
    });
    myMap.geoObjects.add(myPlacemark);
}

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

myMap.controls
    .add('mapTools', {left:5, bottom:35})    // стандартные кнопки
    .add('typeSelector', {left:5, top:5})    // переключатель типа карты
    .add('zoomControl', {right:5, top:15});  // изменение масштаба

Добавить линейку масштаба и обзорную карту: 

myMap.controls
    .add(new ymaps.control.ScaleLine())  // линейка масштаба
    .add(new ymaps.control.MiniMap({     // обзорная карта заданного типа
        type: 'yandex#publicMap'
    }));

Задание собственного шаблона оформления содержимого балуна

Балун — это всплывающее окно, в котором может быть показано любое HTML-содержимое. Одновременно на карте может быть показан только один балун. 

// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(initTinkoMap);
function initTinkoMap() {
    var tinkoMap = new ymaps.Map('tinkoMap', { center: [55.750, 37.607], zoom: 11 });
    // Масштабирование с помощью колесика мышки
    tinkoMap.behaviors.enable('scrollZoom');
    // Добавляем стандартные элементы управления
    tinkoMap.controls.add('zoomControl').add('typeSelector').add('mapTools');

    // Создаем метку центрального офиса
    var centralOfficePlacemark = new ymaps.Placemark([55.752422, 37.77163], {
        // Свойства
        iconContent: 'Центральный',
        name: 'Центральный офис',
        address: '3-й проезд Перова поля, дом 8',
        phone: 'тел: (495) 708-42-13, факc: (495) 708-42-14',
        photo: '<img src="/images/office.jpg" alt="Центральный офис" />',
        print: '<a href="/images/print.jpg" alt="Центральный офис" target="_blank" />Версия для печати</a>'
    }, {
        // Опции
        preset: 'twirl#redStretchyIcon' // иконка растягивается под контент
    });
    // Создаем метку офиса продаж Сокол
    var sokolOfficePlacemark = new ymaps.Placemark([55.810463, 37.524699], {
        // Свойства
        iconContent: 'Сокол',
        name: 'Офис продаж Сокол',
        address: 'ул. Часовая, д. 24, стр. 2',
        phone: 'тел: (495) 708-42-13 доб. 401',
        photo: '<img src="/images/office1.jpg" alt="Офис продаж Сокол" />',
        print: '<a href="/images/print1.jpg" alt="Офис продаж Сокол" target="_blank" />Версия для печати</a>'
    }, {
        // Опции
        preset: 'twirl#redStretchyIcon' // иконка растягивается под контент
    });
    // Создаем метку офиса продаж Мещанский
    var olimpOfficePlacemark = new ymaps.Placemark([55.781294, 37.629261], {
        // Свойства
        iconContent: 'Мещанский',
        name: 'Офис продаж Мещанский',
        address: 'ул. Щепкина, д. 47',
        phone: 'тел: (495) 708-42-13 доб. 402',
        photo: '<img src="/images/office2.jpg" alt="Офис продаж Мещанский" />',
        print: '<a href="/images/print2.jpg" alt="Офис продаж Мещанский" target="_blank" />Версия для печати</a>'
    }, {
        // Опции
        preset: 'twirl#redStretchyIcon' // иконка растягивается под контент
    });
    // Создаем метку офиса продаж Нагорный
    var nagorOfficePlacemark = new ymaps.Placemark([55.678815, 37.603392], {
        // Свойства
        iconContent: 'Нагорный',
        name: 'Офис продаж Нагорный',
        address: 'ул. Нагорная, д. 20, корп. 1',
        phone: 'тел: (495) 708-42-13 доб. 403',
        photo: '<img src="/images/office3.gif" alt="Офис продаж Нагорный" />',
        print: '<a href="/images/print3.jpg" alt="Офис продаж Нагорный" target="_blank" />Версия для печати</a>'
    }, {
        // Опции
        preset: 'twirl#redStretchyIcon' // иконка растягивается под контент
    });

    // Создаем коллекцию, в которую будем добавлять метки
    var tinkoCollection = new ymaps.GeoObjectCollection();

    // Добавляем метки в коллекцию геообъектов
    tinkoCollection
        .add(centralOfficePlacemark)
        .add(sokolOfficePlacemark)
        .add(olimpOfficePlacemark)
        .add(nagorOfficePlacemark);

    // Создаем шаблон для отображения контента балуна
    var tinkoBalloonLayout = ymaps.templateLayoutFactory.createClass(
        '<p><strong>$[properties.name]</strong></p>' +
        '<p>$[properties.address]</p>' +
        '<p>$[properties.phone]</p>' +
        '<p>$[properties.photo]</p>' +
        '<p>$[properties.print]</p>'
    );

    // Помещаем созданный шаблон в хранилище шаблонов.
    // Теперь наш шаблон доступен по ключу 'tinko#officeslayout'
    ymaps.layout.storage.add('tinko#officeslayout', tinkoBalloonLayout);

    // Задаем наш шаблон для балунов геобъектов коллекции
    tinkoCollection.options.set({
        balloonContentBodyLayout:'tinko#officeslayout',
        // Максимальная ширина балуна в пикселах
        balloonMaxWidth: 350
    });

    // Добавляем коллекцию геообъектов на карту
    tinkoMap.geoObjects.add(tinkoCollection);
}

Рисуем многоугольник

ymaps.ready(init);
function init () {
    var myMap = new ymaps.Map ('myMap', {
        center: [55.75, 37.61],
        zoom: 10
    });
    // создаем многоугольник
    var myPolygon = new ymaps.Polygon([[
        // координаты вершин внешней границы многоугольника
        [55.778607,37.553126],
        [55.792923,37.647883],
        [55.724391,37.709681],
        [55.708887,37.583339]
    ]]);
    myMap.geoObjects.add(myPolygon);
}

Дополнительно:

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.