Yandex газрын зургийн api 2.1 шилжилт
Энэ нийтлэлд би Yandex.Maps API-тай ажиллах тухай цуврал нийтлэлүүдийг эхлүүлэхийг хүсч байна. Yandex.Maps-ын баримт бичиг нь нэлээд бүрэн хийгдсэн боловч доторх мэдээллийн хуваагдлын түвшин өндөр байдаг тул та анх удаа хагас литргүйгээр баримт бичгийг оруулахад та үүнийг олж чадахгүй бөгөөд асуудлыг шийдэхийн тулд та нэг цаг зарцуулж болно. Баримт бичиг болон хайлтын системээс хайхад маш их цаг зарцуулдаг. Энэхүү цуврал нийтлэл нь үүнийг бичиж байх үеийн хамгийн сүүлийн үеийн Yandex.Maps API-ийн 2.1 хувилбарыг ашиглах хамгийн түгээмэл тохиолдлуудын практик шийдлүүдийн талаар ярих болно.
Холбоо барих мэдээлэлд сайтыг байрлуулахдаа тухайн сайтыг боловсруулж буй байгууллагын байршлыг тэмдэглэсэн газрын зургийг оруулах шаардлагатай байдаг. Хамгийн энгийн тохиолдолд энэ нь онлайн газрын зургийн дэлгэцийн агшин байж болно (эсвэл онлайн биш):
Оруулахын тулд интерактив газрын зураггазрын зураг бүтээгчийг ашиглаж болно
https://tech.yandex.ru/maps/tools/constructor/:
Хэрэв бидэнд газрын зургийг илүү дэвшилтэт ашиглах шаардлагатай бол (өөрийн шошго, газрын зургийн программчлагдсан хөдөлгөөн гэх мэт) үүний тулд Yandex.Maps API ашиглах хэрэгтэй: https://tech.yandex.ru/maps/jsapi/ . Газрын зургийг хэрхэн ашиглах жишээ болгон, энэ нийтлэлд тусгай шошго, бөмбөлөг зэргийг ашиглан газрын зураг үүсгэх талаар авч үзэх болно.
Эхлээд API бүрэлдэхүүн хэсгүүдийг холбоно уу:
Хэрэв газрын зураг ашиглан зарим том програмыг боловсруулж байгаа бол Yandex тал дээр API-г шинэчлэх үед үйлдвэрлэлд юу ч тасрахгүйн тулд тодорхой хувилбарын API бүрэлдэхүүн хэсгүүдийг холбох нь дээр.
Газрын зургийг зарим блокт, жишээлбэл, дотор байрлуулах шаардлагатай болно div # газрын зураг. Дараа нь газрын зургийг энэ блок дээр үүсгэх ёстой (газрын зураг болон DOM бэлэн байдлын үйл явдлыг эхлүүлсний дараа):
| ymaps.ready(init); init() функц ( var myMap; myMap = шинэ ymaps.Map ("газрын зураг" , ( төв: [ 55.76 , 37.64 ] , томруулах: 7 ) ) ; ) |
Энд бид зааж өгнө:
- блок танигч газрын зураг, бид газрын зураг үүсгэх газар;
- төв- өргөн ба уртрагыг харуулсан газрын зургийн төв;
- томруулах- газрын зургийн масштабын хүчин зүйл.
Анхдагч байдлаар, Yandex.Maps нь олон тооны шаардлагагүй элементүүдийг бий болгодог бөгөөд ихэнх тохиолдолд вэбсайтуудад шаардлагагүй байдаг. Үндсэндээ удирдлага болон газрын зургийн үйлдэлд 2 нөхцөл хэрэглэхэд хангалттай.
- газрын зургийн элементүүдээс зөвхөн томруулах гулсагч байдаг;
- газрын зургийг хулганаар гүйлгэх замаар томруулж болохгүй.
Эдгээр шаардлагыг хангахын тулд бид кодыг нэмж оруулсан болно:
| ymaps.ready(init); function init() ( var myMap; myMap = шинэ ymaps.Map ("газрын зураг" , (төв: [ 55.76 , 37.64 ] , томруулах: 13 , удирдлага: ) ); myMap.behaviors .disable ("scrollZoom" ); myMap. хяналтууд .add ("zoomControl" , (байрлал: ( дээд: 15 , зүүн: 15 ) ) ; ) |
Энд бид тахир дутуу болсон гүйлгэх томруулахмөн нэмсэн "томруулах хяналт"зүүн дээд булангаас байрлуулна.
Одоо бид газрын зураг дээр шошго нэмэх хэрэгтэй, нийтлэлийн хувьд бид түүний зургийг http://medialoot.com/item/free-vector-map-location-pins/ сайтаас татаж аваад кодонд дараах байдлаар байрлуулна.
| ymaps.ready(init); function init() ( var myMap; myMap = new ymaps.Map ("газрын зураг" , ( төв: [ 55.7652 , 37.63836 ] , томруулах: 17 , удирдлага: ) ); myMap.behaviors .disable ("scrollZoom".) хяналтууд .add ("zoomControl" , (байрлал: (дээд: 15 , зүүн: 15 ) ) ); var myPlacemark = шинэ ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "default #image" : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ) ; myMap.geoObjects .add (myPlacemark) ; ) |
Энд бид хувьсагчийг зарлаж байна myPlacemark, бид эхний параметрт тэмдэглэгээг бичдэг ymaps.Газрын тэмдэгшошгоны координатыг зааж, гурав дахь параметрт:
- дотор зааж өгнө iconLayoutөөрчлөн шошгоны дүрс ашиглагдах болно;
- iconImageHref- зураг руу хүрэх зам;
- iconImageSize- зургийн хэмжээг зааж өгөх;
- iconImageOffset- бид зургийн зүүн дээд булангаас шаардлагатай объект руу чиглэсэн зургийн цэг рүү шилжихийг зааж өгдөг. Энэ нь газрын зургийг масштаблах үед шошгоны байрлалыг алдахгүйн тулд зайлшгүй шаардлагатай. Яагаад офсетийг сөрөг утгаар зааж өгсөн бэ - API-г бүтээгчийг зөвхөн Бурхан л мэддэг.
Тэгээд дамжуулан myMap.geoObjects.add()газрын зураг дээр маркер нэмэх.
Одоо бид газрын зургийн шошгон дээр дарахад харагдах бөмбөлөг хийцгээе, бид бөмбөлөгний зохион байгуулалт, түүний агуулгыг http://designdeck.co.uk/a/1241 хаягаас авах болно.
| ymaps.ready(init); function init() ( var myMap; myMap = new ymaps.Map ("газрын зураг" , ( төв: [ 55.7652 , 37.63836 ] , томруулах: 17 , удирдлага: ) ); myMap.behaviors .disable ("scrollZoom".) хяналтууд .add ("zoomControl" , (байрлал: ( дээд: 15 , зүүн: 15 ) ) ) ; var html = " "; html += " " ; var myPlacemark = шинэ ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIAMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHre "http://site/files/APIyaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ; myMap.geoObjects .add (myPlacemark) ; ) "
; html +=" "; html += " " ; html += "Виктория цамхагийн цэцэрлэгт хүрээлэн " ; html += "" ; html +="Лондон хот " ; html += "" ; html += "Их Британи " ; html += "020 7641 5264 " ; html += " |
Энд бид:
- in бөмбөлөг контентбөмбөлгийг нээх үед харуулах агуулгыг зааж өгөх;
- balloonLayout- бөмбөлөг зохион байгуулалт болгон захиалгат зургийг ашиглахыг зааж өгөх;
- balloonContentSizeболон balloonImageSize- агуулгын хэмжээ, зургийн хэмжээ;
- balloonImageHref- зураг руу хүрэх зам;
- balloonImageOffset- зүүн дээд буланд харьцангуй офсет;
- бөмбөлөг сүүдэр— бөмбөлөгний сүүдрийг идэвхгүй болгох (энэ нь захиалгат зурагт ямар ч нөлөө үзүүлэхгүй).
Хувилбарын нэр дэвшигч нь API-ийн хувилбар бөгөөд олон нийтэд ашиглах боломжтой боловч батлагдаж байгаа хэвээр байна. Хувилбарын нэр дэвшигчийг тогтвортой хувилбар болгон суулгахын өмнө түүнийг гарсан даруйдаа API функцийг доройтуулж болзошгүй алдааг шалгадаг. Төсөлдөө гаргах нэр дэвшигчдийг ашигласнаар та боломжит алдааг цаг тухайд нь тодорхойлоход бидэнд тусалж чадна. Та мөн API-ийн шинэ хувилбараар өөрийн апп-ын ажиллагааг урьдчилан шалгах боломжтой.
Гаргасан нэр дэвшигчдийг програм хөгжүүлэлт, туршилтын орчинд ашиглах ёстой. Энэ нь үйлдвэрлэлийн орчинд алдаа гарахаас зайлсхийхэд тусална. Та хувилбарын нэр дэвшигчийг дараах байдлаар идэвхжүүлж болно:
If some time after publishing a release candidate no errors that lead to functionality degradation are found, the release candidate is installed as a stable version of the API and can be accessed via the link api-maps.yandex.ru/2.1.
Enabling the current version
When using your application, we recommend specifying the major version (i.e., do not specify the third number of the version). This guarantees that the current version, that is, the latest stable version of the corresponding major version, will be automatically enabled. For example, if you specify version 2.1, the latest available stable version 2.1.x will be enabled (for example, 2.1.47):
Enabling a set version
Although full compatibility is guaranteed between minor versions, in rare cases you may find that your client application does not work as intended when you enable the latest API version. To avoid these situations, in particularly crucial cases you may need to enable a specific API version. For that, specify its number in its entirety:
Note. If you use a set version, try regularly switching it to a newer version (for example, once every few months). The matter is that over time we can disable the minor version you are using in your project, and then the current version of the API will be enabled automatically. However, the version update might cause your app to stop working correctly. For this reason, we recommend that you keep track of API updates and switch to newer versions as soon as possible.
Summary table
The table below provides recommendations for enabling different versions of the API, depending on the type and complexity of your project.
| Project type | ||
|---|---|---|
| Project type | Recommended version for running applications | Recommended version under development |
|---|---|---|
| Medium and large projects with a basic map | Latest version of to test the functionality. |
|
| Medium and large projects with complex map features | Set version to test the functionality. |
|
| Projects using the commercial version of the API | Set version (see the note below) |
Note. If you use a set version, try regularly switching it to a newer version. The matter is that over time we can disable the minor version you are using in your app, and then the current version of the API will be enabled automatically. However, the version update might cause your app to stop working correctly. For this reason, we recommend that you keep track of API updates and switch to newer versions as soon as possible.
Мы выпустили бета-версию API Яндекс.Карт 2.1 . Главная ее особенность - полный редизайн интерфейса карты. Причем изменения затронули не только внешний вид, но и поведение элементов управления картой. Поскольку изначально было понятно, что поломки обратной совместимости не избежать, мы также внесли архитектурные изменения, которые были необходимы для улучшения работы API (о них ближе к концу поста).
Что касается дизайна, нам было важно, чтобы интерфейс одинаково хорошо выглядел на устройствах и экранах разных размеров. Одна из основных сложностей заключается в том, что мы никогда не знаем заранее, как будет выглядеть сервис или сайт со встроенными картами. Поэтому при разработке редизайна нам нужно было постараться предусмотреть максимум вариантов.
Для решения наших задач мы решили в новой версии реализовать адаптивный дизайн интерфейса. На Yet another Conference дизайнер madhare и разработчик zloylos выступили с докладом о том, зачем нам понадобилась адаптивность и как именно мы ее реализовали в API . В этом посте я опишу предысторию и концепцию наших решений, расскажу о том, что еще нового появилось в версии 2.1-beta, а также о том, что еще изменится к релизу 2.1.
Зачем мы думаем о дизайне?
После релиза версии 2.0 мы уже писали пост , в котором рассказывали о нашем подходе к разработке API. Суть концепции заключается в том, что мы делаем продукт не только для разработчиков, но и для тех, кто будет пользоваться результатами их работы. Если человеку будет удобно и приятно пользоваться нашими картами, и он будет требовать от любимых сервисов именно их - это будет настоящий успех. При этом разработчикам тоже должно быть легко и приятно удовлетворять желания пользователей, а значит мы должны по-максимуму упростить их работу с API. С такими мыслями мы начали работу над версией 2.0, а новая 2.1-бета стала логичным продолжением этой же концепции.Исследование
Наблюдая за инсталляциями нашего API и анализируя кейсы использования карт, мы выделили два основных типа разработчиков:- Решают типовые задачи, не хотят тратить много времени, предпочитают готовые интерфейсы Яндекса. Таких примерно 90%.
- Решают нестандартные задачи или предпочитают даже типовые задачи решать по-своему. Им не подходят стандартные элементы управления. Нужна серьезная кастомизация карт. Логично, что это оставшиеся 10%.
Определившись с аудиториями, мы начали изучать кейсы использования. Оказалось, что в нашем случае основное значение имеет, как ни странно, размер. У нас получилось 3+1 варианта: маленькая, средняя, большая карта и мобильные сайты.
Рисуем дизайн для карт разных размеров
Самый тяжелый случай - маленькие карты. Кажется, что из-за маленького размера стоит убирать все элементы управления картой, но и терять функциональность тоже не хочется. Поэтому специально для маленьких карт мы сделали новый набор контролов:
Также был добавлен новый элемент управления - «развернуть карту на весь экран». Он экономит место на сайте за счет размещения небольшой карты, а у конечного пользователя остается возможность посмотреть большую карту. Все нужное поведение карты запрограммировано уже на стороне API. Вообще идея этой кнопки родилась, когда мы думали о решении для мобильных устройств. Карта приемлемого размера на десктопе может стать совершенно бесполезной на мобильном. Фулскрин решает эту проблему:
Помимо этого изменился дизайн балунов для небольших размеров карт. Теперь на маленьких картах и экранах мобильных устройств стандартный балун заменяется на плашку внизу экрана. Это позволяет сохранить большую информативность карты для пользователей. При желании эту опцию можно отключить.
Со средними картами все гораздо проще. Поскольку есть, где развернуться:
Как и с большими картами:
Чтобы максимально упростить работу разработчиков при выборе элементов управления картой, мы сделали три готовых набора для разных размеров карты.
map.controls.add("default");
Список доступных ключей:
smallMapDefaultSet // для маленькой
mediumMapDefaultSet // для обычной
largeMapDefaultSet // для большой
Разумеется, по-прежнему можно самостоятельно указывать нужные контролы.
myMap.controls
.add("trafficControl") // пробки.add("searchControl") // поиск.add("zoomControl") // зум-контрол.add("typeSelector") // слои.add("geolocationControl") // геолокация.add("fullscreenControl") // фуллскрин
…
Адаптивность
Недостаточно просто отрисовать дизайн интерфейса для разных размеров карт. Ведь страницу с картой могут открывать на разных экранах. Именно поэтому решено было реализовывать адаптивное поведение интерфейсов карты. Различные элементы интерфейса перестраиваются и меняют свой размер в зависимости от фактического размера контейнера карты.
Адаптивное поведение мы реализовали через control.Manager . Также его можно задавать и для тех кнопок и списков, которые вы создаете сами:
Работы по ускорению и оптимизации
Геообъект - это главная сущность на карте. За такой титул ему приходится расплачиваться довольно сложной и громоздкой структурой. Первая итерация работ над геообъектами заключалась в распределении нагрузки при их создании. Мы постарались вынести все подготовительные операции из конструктора геообъекта в места, где они действительно становятся нужны. Это дало очень хорошие результаты. Также в некоторых местах мы сделали ленивую инициализацию сущностей с помощью _defineGetter_ и defineProperty (_defineGetter_, кстати, немного быстрее). Мы сократили количество подписок на события геообъектов внутри нашей системы событий. Частично помог прием подписки сразу на группу геообъектов с последующим определением в обработчике целевого объекта. Здесь нужно признаться, что ускорение можно пощупать только на dom и canvas метках, новые svg метки нам предстоит дорабатывать (why we call it beta? Because it beta then nothing… ;)Во время работы у нас было время на небольшую уборку в коде, по ее результатам приведем микровыводы:
Микровывод 1. При передаче функции-обработчика намного выгоднее передавать отдельно функцию, отдельно контекст. Если у вас чешутся руки сделать bind сразу, подумайте, можете ли вы это себе позволить.
Микровывод 2. Сокращайте количество промежуточных массивов, объектов и анонимных функций. Они не всегда хорошо чистятся garbage collector-ом.
Прочие изменения
- В версии API 2.0 для определения местоположения по IP или с помощью Geolocation API разработчикам приходится самостоятельно использовать необходимые методы и обрабатывать полученный результат. В версии 2.1 достаточно просто добавить новый стандартный элемент управления:
control.GeolocationControl(parameters) Также был улучшен механизм определения местоположения пользователя, используемый в API. Теперь автоматически выбирается наиболее точный результат из браузерной геолокации и геолокации по IP-адресу. - Стандартные метки в API были перерисованы в SVG, а это значит, что им можно задавать произвольные цвета.
- Система пакетов в версии 2.1 будет ликвидирована. Интерфейсы API изменены таким образом, чтобы максимально вынести загрузку компонент API по требованию, для чего большинство отображений были переведены в асинхронный режим. Работы еще ведутся.
- Для такого масштабного обновления нам пришлось пожертвовать обратной совместимостью с версией 2.0. Также к официальному релизу версии 2.1 может сломаться обратная совместимость для некоторых частей бета-версии:
- Существенно изменится кластеризатор.
- Будет переписан map.action.Manager.
- Promises будут реализованы по
29 апреля 2014 года было объявлено, что новая версия API Яндекс.Карт 2.1 выходит из статуса беты и теперь Вы можете на неё безопасно переходить.
В нескольких ближайших заметках я планирую познакомить Вас с данной версией API.
Основные отличительные особенности JavaScript API Яндекс.Карт версии 2.1:
— новый адаптивный дизайн интерфейсов карты;
— мультимаршрутизатор — возможность построения всех возможных маршрутов вместо одного;
— модульная система API. Список всех модулей API приведен в справочнике.
— новый способ отображения объектов на карте, который позволяет создавать больше меток, чем в версии 2.0.
Подробную документацию по новой версии API Яндекс.Карт 2.1 можно прочитать .
Давайте рассмотрим простейший пример создания карты с использованием API Яндекс.Карт 2.1.
Вот его код:
Бид хамгийн эхэнд газрын зургийн API-г http://api-maps.yandex.ru/ хаягаар холбодог.
Сонголтуудыг илүү нарийвчлан авч үзье:
lang - language_region гэсэн хоёр параметрээр тохируулсан,
хэл - хоёр оронтой хэлний код. ISO 639-1 форматаар тодорхойлсон.
бүс - хоёр оронтой улсын код. ISO 3166-1 форматаар тодорхойлсон.
Асаалттай Энэ мөчдараах локалуудыг дэмждэг:
lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.
Нэмэлт сонголтуудыг ашиглаж болно:
coordorder - уртраг-өргөргийн хосыг оролт болгон хүлээн авдаг API функцэд газарзүйн координатыг зааж өгөх дараалал (жишээ нь, Placemark).
Боломжит утгууд:
latlong - [өргөрөг, уртраг] - анхдагчаар ашиглагддаг;
уртлат - [уртраг, өргөрөг].
Өгөгдмөл утга: latlong.
load - Ачаалах модулиудын жагсаалт.
Өгөгдмөл утга: package.full.
горим - API ачаалах горим.
mode=release - Хөтөч дэх траффик болон гүйцэтгэлийн хурдыг багасгахын тулд API кодыг багц хэлбэрээр татаж авах боломжтой;
горим=дибаг - эх код болгон татаж авах горим.
Өгөгдмөл утга: хувилбар.
Холболтын сонголтуудын талаар дэлгэрэнгүй уншина уу
Газрын зургийг харуулахын тулд тэгээс өөр хэмжээтэй контейнерийг зааж өгсөн бөгөөд ямар ч блок хэлбэрийн HTML элементийг контейнер болгон ашиглаж болно, жишээнд энэ нь div байна.
Газрын зургийн параметрүүдийг кодонд тохируулсан болно:
myMap = шинэ ymaps.Map('газрын зураг', (
төв: , // Нижний Новгородын газрын зургийн төв
томруулах: 12 - томруулах түвшин
});
Вэб хуудсыг бүхэлд нь ачаалсны дараа газрын зургийг үүсгэх ёстой. Энэ нь газрын зургийн савыг үүсгэсэн эсэхийг шалгах бөгөөд id-ээр хандах боломжтой. Хуудсыг ачаалсны дараа газрын зургийг эхлүүлэхийн тулд бэлэн () функцийг ашиглаж болно.
API-г ачаалж, DOM үүсгэсэн үед бэлэн функц дуудагдах болно.
ymaps.ready(init);
init()() функц
// Газрын зургийн жишээг үүсгээд контейнерт холбоно
// өгөгдсөн id ("газрын зураг").
myMap = шинэ ymaps.Map('газрын зураг', (
// Газрын зургийг эхлүүлэхдээ та зааж өгөх ёстой
// түүний төв ба масштабын хүчин зүйл.
төв: , // Нижний Новгород
томруулах: 12
});
Өгөгдмөл байдлаар, газрын зураг нь боломжтой бүх удирдлагыг харуулдаг.
Газрын зургийн төрөл - схем.
API нь таван төрлийн газрын зургийн төрлийг өгдөг:
Схем (yandex#map) - анхдагчаар;
Хиймэл дагуул (yandex # хиймэл дагуул);
Гибрид (yandex#hybrid);
Хүмүүсийн газрын зураг (yandex#publicMap);
Үндэсний газрын зургийн эрлийз (yandex#publicMapHybrid).
Хиймэл дагуулын газрын зургийн төрлийг тодорхойлох жишээ
Жишээ код:
Өмнө дурьдсанчлан, 'mediumMapDefaultSet' удирдлагын анхдагч багцыг газрын зураг дээр анхдагчаар нэмсэн.
Газрын зураг дээр шаардлагатай хяналтуудыг нэмэхийн тулд газрын зураг үүсгэх үед удирдлагын параметрт тохирох товчлууруудын жагсаалтыг зааж өгч болно.
Газрын зургийн масштаб болон төрөл хяналтын жишээ код энд байна.
Жишээ код:
|
|
Энэ нь зан төлөвийн параметрийг ашиглан газрын зургийн зан төлөвийг тохируулах боломжтой.
Үүний утгыг тохируулснаар бид газрын зургийн үйлдлийн янз бүрийн сонголтыг идэвхжүүлж эсвэл идэвхгүй болгож чадна:
хулганын товчийг давхар товшиж газрын зургийг масштаблах;
хулганаар эсвэл нэг товшилтоор газрын зургийг чирэх;
хулганы зүүн товчийг ашиглан газар нутгийг сонгохдоо газрын зургийг масштаблах;
олон мэдрэгчтэй мэдрэгчтэй газрын зургийг масштаблах;
газар нутгийг сонгохдоо газрын зургийг масштаблах баруун товшино уухулгана;
зайны хэмжилт;
хулганын дугуйгаар газрын зургийг томруулж байна.
Хулганы дугуй томруулалтыг идэвхгүй болгосон кодын жишээ.
|
|
Газрын зургийг үүсгэсний дараа түүний параметрүүдийг өөрчлөх боломжтой.
Хулганы дугуй томруулалтыг асаана уу
myMap.behaviors.enable("scrollZoom");
Хаах
myMap.behaviors.disable("scrollZoom");
Шинэ төрлийн газрын зураг суулгаж байна Ард түмэн
myMap.setType('yandex#publicMap');
Газрын зургийн шинэ төв байгуулж байна
Одоохондоо ийм л байна.
Үргэлжлэл бий…
