Конструктор карт яндекс api

Обновлено: 28.03.2024

Мне довелось допиливать небольшой проект(~500h), в котором на старте было принято решение использовать Yandex.Maps API, потому что зачем для Москвы использовать гугл карты, если есть наши. Сейчас расскажу, как все прошло.

Я не проводил глубоких подкапотных исследований и никаких секретов не открою. Но, если вам, как и мне, надо очень быстро (вчера) начать использовать в вашем проекте карты, надеюсь, помогу сэкономить немного времени.

Если лень читать или сразу нужен вывод, отправляю в последнее “Действие 4: Это конец / TL;DR”

Действие 0: Определения

Начнем с определений: что, зачем, почему.

Задача: отобразить карту Москвы, пинами указать конкретные места, уметь построить маршрут от текущего положения до конкретной точки (или до нескольких).
Технология: Yandex.Maps API. Ссылки на документацию[1] ниже.
Итого: прочитайте документацию, реализуйте фичи.

Все выглядит просто, что может пойти не так.

Действие 1: Поиск

В “. /maps” [4] нас ждут только бесконечный поиск, разочарование и страдания. Которые к нужной документации меня так и не привели.

Возвращаемся на шаг назад, листаем вниз и находим MapKit [5] — нам сюда. Навигация тут довольно грустная, поэтому вот важные ссылки — android samples [6] и Documentation [7] (возможно, иногда получится найти тут что-то полезное).

Действие 2: Поехали

Находим Getting started и приступаем. В начале все просто.

На “Step 3. Set up the library” возникают вопросы. Вью и фабрику нужно обязательно стартовать и останавливать отдельно, иначе, как нам сообщают, ничего не будет работать. Почему? А что будет, если что-то стартану, а что-то нет, или стартану что-то позже? А если несколько вьюх, то для каждого надо фабрику, или это синглтон?

Возможно, это всего лишь QuickStart и дальше мы найдем подробное описание! (нет)

Давайте смотреть, что есть по документации. А все, ничего больше нет. Есть только сгенерированная документация с комментариями типа:

Ладно, на гитхабе есть еще проект с примерами использования [8]. Внутри каждого класса активити есть комментарии о том, что он делает и зачем нужен (после документации это просто подарок судьбы). Есть несколько сценариев: создание кастомного слоя карты, построение маршрута для автомобиля, работа с объектами на карте и некоторые другие.

Выглядит ли апи мощным? Да.
Понятно ли как им пользоваться в случаях, чуть более сложных, чем примеры? Нет.(
Как это понять? ¯_(ツ)_/¯ Нырять с головой в код, по итогу исследований продавать книжку о том, что нашел.

Действие 3: Разрабатываем

Задача 1: отобразить карту
Сложностей не встретил, все есть в гайде.

Задача 2: отобразить пины
Нам нужен “MapObjectsActivity.java", то, что мы ищем, называется Placemarks. Смотрим в код, чтобы понять, что с ними делать.

Задача 3: построить маршрут
Наш друг тут — “MasstransitRoutingActivity.java”. Маршрут можно попросить разный: только на машине, только пешком, и так и сяк; наверняка можно еще учесть метро и другие разные штуки, но я недонырнул.

Дополнительная задача: позиционирование прямое и обратное. Надо же еще уметь определять местоположение. Прямое геокодирование — определять координаты по названию, обратное — определять название по координатам.

Действие 4: Это конец / TL;DR

Общие итоги:
Яндекс карты классные. Как ими пользоваться — непонятно.

Хорошая документация, чтобы “потрогать” сервис. Ужасная документация, чтобы что-то с ним сделать. Структура ссылок — “Хрен найдешь”, качество находки — “Вот колесо, оно катится. А далее вы сами легко сможете изобрести машину, ракету, подводную лодку”.

Основные моменты:
Как отобразить карту в проекте? Ссылка [7], тут всё просто.
Как добавить пин на карту? Ключевые слова Placemark, MapObjects. Искать в samples.
Как построить маршрут? Ключевое слово MasstransitRouting. Искать в samples.
Как сделать что-то еще? Искать в samples. Если там нет, то у вас проблемы.

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

Чтобы разместить карту на странице, достаточно вставить на эту страницу код виджета, сформированный конструктором.

С помощью Конструктора можно создать два типа карт: интерактивную и статическую. Для интерактивной карты Конструктор формирует элемент script , который подгружает на страницу JavaScript-код для создания карты. Для статической карты Конструктор формирует элемент img , который содержит ссылку на страницу, выполняющую переадресацию 301 с указанными параметрами карты на Static API.

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

Через API Конструктора карт нельзя изменять код виджета, сформированный с помощью элемента iframe .

Интерактивная карта

Интерактивная карта вставляется на страницу с помощью элемента script . В атрибуте src могут быть заданы следующие параметры карты:

um — идентификатор карты (обязательный параметр).

Пример значения параметра: um=constructor%3A834e99a97453487e0b040c9619.. .

Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр sid . Пример: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH . Этот параметр является устаревшим.

width — ширина карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей ширине родительского контейнера;

height — высота карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей высоте родительского контейнера. Если параметр указан в процентах, то необходимо выставить высоту для родительского контейнера, в противном случае карта не отобразится.

id — идентификатор DOM-элемента, в который нужно вставить карту. Указывается в том случае, если виджет вставлен на страницу в элемент <head> .

lang — локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.

apikey — ключ от API Карт. Если API-ключ не указан, на карте не будут отображаться элементы управления: поисковая строка, кнопки для построения маршрутов и просмотра панорам.

Примечание. Виджет может быть добавлен как в элемент body , так и в элемент head . Если код вставлен в элемент head , то в атрибуте src необходимо указать параметр id .

Если один и тот же код с одинаковым id вставлен на страницу несколько раз, то в DOM-элемент с указанным id будут вставлены все карты.

Ниже рассмотрены различные примеры размещения на странице интерактивной карты.

Пример 3. Вставка интерактивной карты в контейнер с заданными размерами

Статическая карта

Статическая карта вставляется на страницу с помощью элемента img . Параметры карты, которые могут быть заданы в атрибуте src :

um — идентификатор карты (обязательный параметр).

Пример значения параметра: um=constructor%3A834e99a97453487e0b040c9619.. .

Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр sid . Пример: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH . Этот параметр является устаревшим.

lang — локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.

apikey — ключ от API Карт. Необходимо передавать в случае, если карта используется в коммерческих целях. Подробнее см. в разделе Использование платной версии API.

Ниже рассмотрены примеры размещения статической карты на странице.

Использование платной версии API

Платный API предназначен для использования в коммерческих целях. Его можно использовать в закрытых системах, приложениях и программных модулях. В платной версии нет ограничений стандартной лицензии.

Платная версия распространяется как на интерактивные, так и на статические карты.

Для использования платной версии API со статической картой необходимо в коде элемента указать параметр apikey — API-ключ, полученный в кабинете разработчика. Например:

Map Constructor is an easy-to-use online tool for creating maps with directions and marking places on maps. You can put the maps you create on your website or blog. You can also use these maps in accordance with the Commercial API.

To display a map on a webpage, just copy the widget code generated by the Map Constructor and embed it on the page.

You can use the Map Constructor to create two kinds of maps: interactive and static. For interactive maps, the Map Constructor generates a script element, which loads the JavaScript code for creating the map to the page. For a static map, the Map Constructor generates the img element, which contains a link to a page that performs a 301 redirect to the Static API with the specified map parameters.

The Map Constructor API lets you change the map settings by passing the desired parameters in the widget code. For example, you can set the map height and width, as well as its language.

You cannot change the Map Constructor widget code that is generated by using the iframe element.

Interactive map

The interactive map is embedded on the page using the script element. The following map parameters can be set using the src attribute:

um — the map ID (required).

Example of parameter value: um=constructor%3A834e99a97453487e0b040c9619.. .

Note. In previous versions of the Map Constructor, the map ID was set in the sid parameter. Example: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH . This parameter has been deprecated.

width — The width of the map in pixels or percentages. If this parameter is omitted, the map stretches to the entire width of the parent container.

id — The ID of the DOM element to embed the map in. Specified if the widget is inserted on the page in the element .

lang — The locale. The following values are supported: ru_RU (default), ru_UA, uk_UA, en_RU, en_US, tr_TR. For more information, see the section Map localization.

apikey — Maps API key. If the API key is not specified, the map will not display the following controls: the search bar, button for the route building, and panoramas.

Note. The widget can be inserted in either the body element or the head element. If the widget code is in the head element, the id parameter must be specified in the src attribute.

If the same widget code with the same id is inserted on a page multiple times, all the maps will be added to the DOM element with the specified id .

Several examples of embedding an interactive map on a page are shown below.

Example 3. Embedding an interactive map in a container with set parameters

Static map

A static map is inserted on a page using the img element. Map parameters that can be set in the src attribute:

um — the map ID (required).

Example of parameter value: um=constructor%3A834e99a97453487e0b040c9619.. .

Note. In previous versions of the Map Constructor, the map ID was set in the sid parameter. Example: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH . This parameter has been deprecated.

lang — The locale. The following values are supported: ru_RU (default), ru_UA, uk_UA, en_RU, en_US, tr_TR. For more information, see the section Map localization.

apikey — Maps API key. Required if the map is used for commercial purposes. See the Using the commercial version of the API section for more information.

The examples below demonstrate placing a static map on a page.

Using the commercial version of the API

The Commercial API is intended for commercial purposes. You can use it in closed systems, applications, and software modules. The paid version lifts some restrictions of the standard license.

The commercial version applies to both interactive and static maps.

To use the commercial version of the API with a static map, the element code must specify the parameter apikey — The API key obtained in developer console. For example:

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

Чтобы разместить карту на странице, достаточно вставить на эту страницу код виджета, сформированный конструктором.

С помощью Конструктора можно создать два типа карт: интерактивную и статическую. Для интерактивной карты Конструктор формирует элемент script , который подгружает на страницу JavaScript-код для создания карты. Для статической карты Конструктор формирует элемент img , который содержит ссылку на страницу, выполняющую переадресацию 301 с указанными параметрами карты на Static API.

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

Через API Конструктора карт нельзя изменять код виджета, сформированный с помощью элемента iframe .

Интерактивная карта

Интерактивная карта вставляется на страницу с помощью элемента script . В атрибуте src могут быть заданы следующие параметры карты:

um — идентификатор карты (обязательный параметр).

Пример значения параметра: um=constructor%3A834e99a97453487e0b040c9619.. .

Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр sid . Пример: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH . Этот параметр является устаревшим.

width — ширина карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей ширине родительского контейнера;

height — высота карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей высоте родительского контейнера. Если параметр указан в процентах, то необходимо выставить высоту для родительского контейнера, в противном случае карта не отобразится.

id — идентификатор DOM-элемента, в который нужно вставить карту. Указывается в том случае, если виджет вставлен на страницу в элемент <head> .

lang — локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.

apikey — ключ от API Карт. Если API-ключ не указан, на карте не будут отображаться элементы управления: поисковая строка, кнопки для построения маршрутов и просмотра панорам.

Примечание. Виджет может быть добавлен как в элемент body , так и в элемент head . Если код вставлен в элемент head , то в атрибуте src необходимо указать параметр id .

Если один и тот же код с одинаковым id вставлен на страницу несколько раз, то в DOM-элемент с указанным id будут вставлены все карты.

Ниже рассмотрены различные примеры размещения на странице интерактивной карты.

Пример 3. Вставка интерактивной карты в контейнер с заданными размерами

Статическая карта

Статическая карта вставляется на страницу с помощью элемента img . Параметры карты, которые могут быть заданы в атрибуте src :

um — идентификатор карты (обязательный параметр).

Пример значения параметра: um=constructor%3A834e99a97453487e0b040c9619.. .

Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр sid . Пример: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH . Этот параметр является устаревшим.

lang — локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.

apikey — ключ от API Карт. Необходимо передавать в случае, если карта используется в коммерческих целях. Подробнее см. в разделе Использование платной версии API.

Ниже рассмотрены примеры размещения статической карты на странице.

Использование платной версии API

Платный API предназначен для использования в коммерческих целях. Его можно использовать в закрытых системах, приложениях и программных модулях. В платной версии нет ограничений стандартной лицензии.

Платная версия распространяется как на интерактивные, так и на статические карты.

Для использования платной версии API со статической картой необходимо в коде элемента указать параметр apikey — API-ключ, полученный в кабинете разработчика. Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Читайте также: