No Image

Яндекс карты для разработчиков

СОДЕРЖАНИЕ
1 просмотров
22 января 2020

технические науки

  • Хижняк Юлия Дмитриевна , бакалавр, студент
  • Белгородский государственный национальный исследовательский университет
  • API ЯНДЕКС КАРТ
  • API GOOGLE КАРТ
  • КАРТОГРАФИЧЕСКИЙ СЕРВИС
  • API 2 ГИС

Похожие материалы

В настоящее время популярные картографические порталы, такие как Google Maps, Яндекс.Карты и ряд других, предоставляют API (Application Programming Interface — интерфейс программирования приложений), с помощью которого можно строить и добавлять карты на сторонние сайты. API представляет собой набор средств, дающих возможность получить доступ к какому-либо сервису и запросить у него данные. Разработчик может воспользоваться им для получения доступа к функционалу программы, библиотеки, модуля.

Картографический сервис — это специализированная информационная система, предоставляющая пространственные данные в виде интерактивной карты. Картографический веб-сервис обеспечивает веб-доступ к картографической информации на основе интерфейсов прикладного программирования (API). В настоящее время на российском рынке наиболее известны и распространены следующие картографические и справочные сервисы:

Рассмотрим их с точки зрения предоставления ими возможностей для создания собственных карт, их настройки и размещения на них необходимой бизнес-информации.

Яндекс.Карты — это картографический веб-сервис от компании Яндекс, запущенный в 2004 году. Яндекс.Карты предоставляют детальные схемы большинства городов и стран мира, содержат справочную информацию об организациях в городе, средства для построения маршрутов на машине и общественным транспортом с учетом пробок.

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

Сервис Яндекс.Карт возможно использовать только для сайтов или приложений, доступных для бесплатного открытого использования, при этом сначала необходимо зарегистрироваться. Важно, что количество обращений к геокодеру, маршрутизатору и панорамам должно быть менее 25 000 запросов в сутки.

Google Maps — один из самых известных картографических сервисов. Существует с 2005 года. Три основные части Google Maps — это непосредственно сами карты, снимки со спутника и Google Street View. Карты от Google также предоставляют возможности для использования своих карт в сторонних сервисах. Используя Google Maps API, можно поместить любую карту из Google Maps на внешнем сайте, управляя этой картой через JavaScript API. В состав средств для разработчика входят следующие программные интерфейсы (API):

  • Android API (создание и добавление собственных карт для приложения на базе Android);
  • Javascript API (создание и добавление собственных карт для веб-сайтов);
  • Geocoding API (обеспечивает доступ к службам геокодирования статичных адресов через запрос HTTP с целью размещения контента на карте);
  • Directions API (включает средства для составления маршрутов, расчёта времени поездки, определения расстояний);
  • Places API Web Service (служба, из которой с помощью HTTP-запросов можно получать информацию о местах, определенных в данном API: организациях, географических объектах или достопримечательностях).

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

2ГИС — это российский проект, включающий в себя карты, навигатор и справочник c подробной информацией об организациях в каждом городе — начиная от названия и контактов, заканчивая временем работы и способами оплаты услуг. Среди других сервисов 2ГИС отличается хорошей детализацией карт и полнотой данных.

Данный сервис также предоставляет разработчикам инструменты для использования своих карт в некоммерческих целях. С помощью API 2GIS можно создавать интерактивные карты на веб-странице, показывать на карте различные объекты (маркеры, области, геометрические объекты), производить поиск на карте: определять координаты геообъектов по их названиям и названия по координатам. API 2GIS имеет открытый исходный код, в ее основе лежит библиотека Leaflet, предоставляющая модули для кластеризации, создания тепловых карт, анимированных маркеров, а также поддерживающая создание собственных модулей. Также в API 2GIS есть возможность поэтажной детализации зданий и другие возможности.

Читайте также:  Функция защита зрения на телефоне

Рассмотрим качество изображения и уровень детализации одного и того же участка определенного города в Яндекс.Картах, Google Maps и картах 2ГИС, представленных на рисунках 1, 2 и 3 соответственно. Качественная карта предполагает правильное расположение всех объектов, хорошую прорисовку всех домов, включая новостройки, их корректную нумерацию, достаточную цветовую контрастность карты.

Рисунок 1. Участок Яндекс.Карт Рисунок 2. Участок Google Maps Рисунок 3. Участок карты 2ГИС

Как видно на рисунках, Яндекс.Карты и карты 2ГИС имеют лучшую детализацию и прорисовку объектов на выбранном участке, а также более выгодное цветовое оформление. На карте Google некоторые здания не пронумерованы или не прорисованы, отсутствуют новостройки.

В таблице 1 представлено сравнение рассматриваемых сервисов по различным критериям.

В данной статье я хочу начать цикл статей по работе с API Яндекс.Карт. Документация Яндекс.Карт достаточно полна, но степень разрозненности информации в ней высокая, при первом заходе в документацию без пол-литры не разобраться, и для решения какой-то проблемы можно потратить много времени на поиск по документации и в поисковике. Этот цикл статей будет рассказывать о практических решениях наиболее частых случаев использования API Яндекс.Карт последней, на момент написания статьи, версии 2.1.

При вёрстке сайта в контактной информации часто бывает необходимость вставки карты, на которой будет отмечено местоположение организации, для которой разрабатывается сайт. В самых простых случаях это может быть просто скриншот c онлайн-карт (или не онлайн):

Для вставки интерактивной карты может использоваться конструктор карт
https://tech.yandex.ru/maps/tools/constructor/:

В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/. В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.

Для начала подключим компоненты API:

Если разрабатывается какое-то большое приложение с использованием карт, то лучше подключать компоненты API определённой версии, чтобы при обновлении API на стороне Яндекса у нас ничего не сломалось на продакшине:

Карту необходимо будет расположить в каком-нибудь блоке, например в div#map. Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):

Здесь мы указываем:

  1. идентификатор блока «map», где у нас будет создана карта;
  2. center — центр карты с указанием ширины и долготы;
  3. zoom — коэффициент масштаба карты.

По умолчанию Яндекс.Карты создают много лишних элементов, которые в большинстве случаев не нужны на сайтах. В основном к элементам управления и к поведению карты достаточно применить 2 условия:

  1. из элементов карты присутствует только ползунок изменения масштаба;
  2. карта не должна менять масштаб скроллом мыши.

Для выполнения этих требований дополняем код:

Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.

Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:

Здесь мы объявляем переменную myPlacemark, в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:

  1. указываем в iconLayout, что будет использоваться пользовательское изображение метки;
  2. iconImageHref — путь к изображению;
  3. iconImageSize — указываем размеры изображения;
  4. iconImageOffset — указываем сдвиг от левого верхнего угла картинке к точке изображения, которая показываем на нужный нам объет. Нужно это чтобы при масштабировании карты положение метки не сбивалось. Почему смещение указывается в отрицательных значениях — одному Богу создателю API известно.

И через myMap.geoObjects.add() добавляем метку на карту.

А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241

Читайте также:  Список выхода игр 2018

Здесь мы:

  1. в balloonContent указываем контент, который будет отображаться при открытии балуна;
  2. balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;
  3. balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;
  4. balloonImageHref — путь к изображению;
  5. balloonImageOffset — смещение относительно левого верхнего угла;
  6. balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).

За последние два месяца многие пользователи столкнулись с большой неприятностью, связанной с виджетами, использующих Яндекс.Карты: при попытке открыть виджет на экране появлялось пустое окно со списком пунктов самовывоза. Кто-то поспешил обратиться в техподдержку и получил консультацию, кто-то разобрался и решил проблему своими силами. Были и те, кто посчитал разработчиков виджета врагами народа и пожелал им соответствующего незавидного будущего. Давайте же попробуем ответить на два извечных вопроса: "кто виноват" и "что делать"?

С недавнего времени Яндекс изменили требования для пользования картами: теперь при подключении необходимо всегда указывать API-ключ, который можно бесплатно получить в кабинете разработчика. Без него блокируется доступ к Геокодеру и другому функционалу, необходимому для позиционирования виджета по городам. Причина "пустой карты" в ошибке 429 Too Many Requests (видна в консоли браузера при открытии карты ПВЗ). Справедливости ради следует заметить, что Яндекс предупреждал в своем блоге об этих изменениях за несколько месяцев, и стал вводить ограничения постепенно.

В модулях была добавлена соответствующая настройка, позволяющая указать АПИ-ключ Яндекс.Карт. Этот ключ подставлялся в шаблонах виджетов, и проблема с ошибкой 429 решалась при одном важном условии: если Яндекс.Карты подключает сам шаблон виджета и никто кроме него.

Проблема в том, что на сайтах порой установлено множество модулей, каждый из которых считает своим долгом подключить свои Яндекс.Карты, даже если они нужны только на одной конкретной странице сайта, да и то не всегда. А некоторые, в отличие от наших, еще и хамски не дают отключить свое вмешательство никаким способом, кроме прямой правки кода.

Казалось бы, раз в Битриксе используются Яндекс.Карты – то у него наверняка есть настройка, позволяющая оперировать АПИ-ключом. И это так: в настройках модуля Управление структурой есть соответствующее поле. Но есть проблема: разработчики CMS забыли объяснить коду шаблона компонента оформления заказа, что для Яндекс.Карт можно использовать АПИ-ключ. В дефолтных шаблонах карты подключаются без ключа и нет возможности задать его какими-либо настройками. Такого удара в спину мы, конечно, не ожидали, хотя сами предупредили техподдержку Битрикса о новых требованиях Яндекса, еще когда новость была анонсирована.

Кажется, получилось, что виноваты все, и не виноват никто – но, чтобы сгладить свое участие в творящемся безобразии, укажем как все это дело лечить.

Самое главное правило, которое необходимо осознать: чем меньше у вас сторонних модулей и модификаций – тем больше вероятность, что получится решить проблему без обращения к программистам. Шаги могут засыпаться из-за сторонних подключений карт (которые игнорируют передаваемый ключ) и кастомных шаблонов. Также помним, что стандартное оформление заказа в Битриксе на момент написания статьи не умеет подключать Яндекс.Карты с ключом.

  • Получите бесплатный АПИ-ключ Яндекс.Карт в https://tech.yandex.ru/maps/jsapi/doc/2.1/quick-start/index-docpage/#get-api-key (выбирайте Javascript API и Геокодер).
  • В настройках штатного модуля Битрикса «Управление структурой» укажите ключ.
  • В настройках модуля интеграции со СДЭК (или другого, использующим карты) также укажите ключ. Если в настройках этой опции нет – следует обновить модуль.
  • Сбросьте кэш Битрикса и браузера (ctrl+F5).

Эти четыре шага решат проблему, если у вас стандартный шаблон как оформления заказа, так и виджета, и Яндекс.Карты подключаются только виджетом.

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

  • Проверьте, не подключаются ли Яндекс.Карты самим компонентом оформления заказа (bitrix:sale.order.ajax). Современная версия компонента будет подключать карты при любом из флагов "Показывать карту в блоке свойств заказа" (SHOW_MAP_IN_PROPS) и "Показывать карту для доставок с самовывозом" (SHOW_PICKUP_MAP).
    К сожалению, указать АПИ-ключ Яндекс.Карт компоненту bitrix:sale.order.ajax через настройки невозможно, только путем правки кода шаблона template.php. Варианты решения:
  • В настройках компонента оформления заказа нужно снять флажки с опций "Показывать карту в блоке свойств заказа" (SHOW_MAP_IN_PROPS) и "Показывать карту для доставок с самовывозом" (SHOW_PICKUP_MAP). В модуле интеграции со СДЭК (или другом, использующем карты) убрать флаг "Не подключать Яндекс-карты", а также указать АПИ-ключ. Модуль загрузит скрипты Яндекс.Карт с ключом — проблема решится.
  • Если эти опции нужны и отключить их нельзя (вы используете свою карту самовывоза для настраиваемой службы доставки), то надо либо переключиться на использование Google карт в настройках компонента и разрешить загружать скрипты Яндекс.Карт модулю СДЭК, либо править шаблон компонента оформления заказа (добавить АПИ-ключ).
Читайте также:  Штрих коды россии на товарах
  • Сбросьте кэш Битрикса и браузера, обновите страницу оформления заказа и поиском по HTML-коду страницы проверьте, что к подключению скриптов Яндекс.Карт добавился параметр с ключом.
  • Следует учесть, что карты могут подключаться и другими модулями служб доставок, а также быть прописаны напрямую в шаблоне сайта. Если рекомендации выше не помогли, то причина в этом, и нужно искать актуальное подключение скриптов Яндекс.Карт.

    Опускаемся на дно

    Вариант лечения сторонних модулей – пинать разработчиков, чтобы разобрались с их Яндекс.Картами. Но что же делать, если причина – в Битриксе? К сожалению, здесь придется вносить правки в шаблоны оформления заказа, то есть, кастомизировать их, по крайней мере, до тех пор, пока Битрикс не доработает подключение Яндекс.Карт в своем решении.

    Отметим отдельно, что, если вы не в курсе, где именно искать эти мифические шаблоны – следует обратиться к опытному программисту. Мы нарочно не приводим ссылки, чтобы неопытный пользователь не убил себе сайт.

    На данный момент можно встретить в основном два типа шаблонов оформления заказа.

    Первый вариант шаблона, современный:

    Второй вариант шаблона, олдскульный:

    Напоминаем, что вносить правки в дефолтные шаблоны без выноса их в отдельное пространство имен – моветон. Если же все в данном абзаце для вас – техноколдовская белиберда – остается лишь последний способ решения проблемы.

    Обращение в техподдержку

    В случае, если проблема с картами не лечится – мы можем попытаться решить ее нашими силами. К сожалению, внесение правок на конкретный сайт не оплачивается службами доставки, обеспечивающими работу модуля. Поэтому с нашей стороны в рамках бесплатной техподдержки возможна консультация (см. выше), либо вмешательство в сайт – в рамках платной.

    Актуальные контакты техподдержки указаны в Маркетплейсе Битрикса наших модулей.

    Почему вы не добавите кнопку «Сделать все хорошо».

    И напоследок ответим на самый распространенный вопрос.

    Как уже было замечено, корень проблемы (помимо того, что не все читают FAQ или не обновляют модуль вовремя), в том, что Яндекс.Карты в Битриксе (да и на любой другой открытой CMS, пожалуй) могут подключаться во многих местах.

    Свою зону ответственности мы закрыли настройками для АПИ-ключа, однако карты могут подключаться либо Битриксом, либо сторонними модулями – и вот туда уже мы лезть не можем. Кнопка «сделать все хорошо» имела бы два варианта реализации:

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

    На этой ноте смеем откланяться. Надеемся, статья помогла вам решить проблему с подключением и не подавила обилием букв.

    Комментировать
    1 просмотров
    Комментариев нет, будьте первым кто его оставит

    Это интересно
    No Image Компьютеры
    0 комментариев
    No Image Компьютеры
    0 комментариев
    No Image Компьютеры
    0 комментариев
    No Image Компьютеры
    0 комментариев
    Adblock detector