Яндекс карты javascript api

Яндекс карты javascript api

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На сайте организации обычно указывается её адрес. Для удобства потенциальных клиентов, вместе с адресом располагается карта, на которой показано местонахождение организации. Можно сделать скрин карты в подходящем масштабе и создать обычное изображение. Но сайт выглядит гораздо интереснее и солиднее, если добавить на него Яндекс карты или Google maps.

У Яндекс карт есть только один недостаток — они не поддерживаются старыми браузерами. В остальном они лучше Гугла. Они содержат больше деталей, которые помогают лучше ориентироваться на карте. Из-за этого Яндекс карта загружается немного дольше, но это загрузка полезного контента. Кроме того, подключение карты делается проще. Поэтому Яндекс карты намного популярнее.

Добавление Яндекс карты

Разместить карту на своём сайте можно двумя способами: воспользоваться конструктором карт или использовать API Яндекса и написать скрипт самостоятельно. Для входа в конструктор нужен почтовый аккаунт на Яндексе. Карты, созданные в конструкторе, хуже поддерживаются браузерами, поэтому я рекомендую использовать второй способ. Он совсем несложный.

Читайте также:  Что за значок в правом углу

Создадим страницу и добавим на неё блок, в который будет загружаться карта. Этому блоку нужно задать атрибут id и установить размеры. По id будет определяться блок для карты.

Для использования карты нужно подключить API Яндекс карт. Это выполняет следующий код:

Добавьте этот код на созданную страницу.

Используя API Яндекса, пишем скрипт, добавляющий карту:

Поясню этот скрипт: карта создаётся внутри функции initMap() . В 20 строке функцию запускает метод ymaps.ready() . Это нужно, чтобы API загрузился до начала его использования.

Карту создаёт объект класса ymaps.Map . Нужно указать два параметра. В первом параметре указывается id блока, в который загружается карта. Второй параметр — это объект с настройками карты. Настройки такие:

center — координаты центра карты.

zoom — число от 0 до 19. Определяет масштаб карты. Чем меньше число, тем больше масштаб.

Координаты центра указываются в массиве, содержащем два элемента: широта и долгота. Чтобы здание или другой объект располагался в центре карты, нужно указать координаты этого объекта. Координаты можно узнать следующим способом.

  1. Открываете карту на сайте Яндекса
  2. Находите нужный объект
  3. Нажимаете на него
  4. Появится окно, в котором будут координаты

Укажите в скрипте координаты нужного Вам объекта, и карта готова. Она должна отображаться на странице.

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

Важный объект на карте можно указать при помощи метки. Например, здание, в котором располагается Ваша организация. Это выглядит так:

Чтобы поставить метку, нужно создать переменную для объекта метки. Она должна быть объявлена на глобальном уровне, то есть, до функции initMap() .

Внутри функции initMap() , после создания карты нужно добавить такой код:

Скрипт работает так: создаётся объект класса ymaps.Placemark . Указывается два параметра. В первом указываем координаты метки. Второй параметр — это объект с настройками метки. Можно указать такие настройки:

Читайте также:  Apc line r 600va auto

hintContent — текст, появляющийся при наведении на метку

balloonContent — текст в окне, которое появляется при клике не метке

В 23 строке созданная метка добавляется на карту.У объекта карты есть метод geoObjects.add() , который добавляет на карту объекты. В нашем примере объект карты записан в переменную map . К ней применён этот метод.

Весь код скрипта, добавляющего карту с меткой, выглядит так:

Если координаты центра и метки совпадают, то можно массив с координатами записать в переменную, а не писать каждый раз. Но метку можно поставить в любом месте. Тогда координаты нужно писать отдельно.

Коприрование материалов сайта возможно только с согласия администрации

Ссылка на основную публикацию
Что такое экранное время в ios
Экранное время – одна из лучших функций iOS 12, позволяющая следить за тем, как часто вы берёте в руки свой...
Что делать если отключился звук на компьютере
Мы зарегистрировали подозрительный трафик, исходящий из вашей сети. С помощью этой страницы мы сможем определить, что запросы отправляете именно вы,...
Что делать если полетели драйвера видеокарты
Распространенная ошибка в Windows 7 и реже в Windows 10 и 8 — сообщение «Видеодрайвер перестал отвечать и был успешно...
Что такое эмодзи клавиатура на телефоне
Современное общение сложно представить без мессенджеров, чатов и социальных сетей, но только текстом бывает сложно передать все эмоции. В этом...
Adblock detector