Yandex xaritalari api 2.1 o'tish

Ushbu maqolada men Yandex.Maps API bilan ishlash bo'yicha bir qator maqolalarni boshlamoqchiman. Yandex.Maps hujjatlari juda to'liq, ammo undagi ma'lumotlarning bo'linish darajasi yuqori, hujjatlarni yarim litrsiz birinchi marta kiritganingizda, siz buni tushunolmaysiz va muammoni hal qilish uchun siz bir necha soat sarflashingiz mumkin. hujjatlar va qidiruv tizimida qidirish uchun ko'p vaqt. Ushbu maqolalar turkumida Yandex.Maps API-dan foydalanishning eng tez-tez uchraydigan holatlariga amaliy echimlar haqida so'z boradi, bu yozuvni yozish paytida, 2.1.

Saytni aloqa ma'lumotlariga joylashtirishda ko'pincha sayt ishlab chiqilayotgan tashkilotning joylashuvi belgilanadigan xaritani kiritish kerak bo'ladi. Eng oddiy hollarda, bu onlayn xaritalardan olingan skrinshot bo'lishi mumkin (yoki onlayn emas):

Kiritish uchun interaktiv xarita xarita yaratuvchisidan foydalanish mumkin
https://tech.yandex.ru/maps/tools/constructor/:

Agar bizga xaritalardan yanada ilg'or foydalanish kerak bo'lsa (o'z teglarimiz, xaritalarning dasturiy harakati va boshqalar), buning uchun biz Yandex.Maps API-dan foydalanishimiz kerak: https://tech.yandex.ru/maps/jsapi/ . Xaritalardan foydalanishga misol sifatida ushbu maqola oddiy yorliq va havo sharining qo'shilishi bilan xaritani yaratishni ko'rib chiqadi.

Birinchidan, API komponentlarini ulaymiz:

Agar xaritalar yordamida ba'zi katta ilovalar ishlab chiqilayotgan bo'lsa, Yandex tomonida API-ni yangilashda ishlab chiqarishda hech narsa buzilmasligi uchun ma'lum bir versiyaning API komponentlarini ulash yaxshiroqdir:

Xaritani qandaydir blokda, masalan, ichida joylashtirish kerak bo'ladi div#map. Keyinchalik, xarita ushbu blokda yaratilishi kerak (xarita va DOM tayyorligi hodisasi ishga tushirilgandan so'ng):

Bu erda biz ko'rsatamiz:

1. blok identifikatori xarita, bu erda biz xaritani yaratamiz;
2. markaz— kenglik va uzunlikni ko'rsatuvchi xaritaning markazi;
3. kattalashtirish— xarita masshtab koeffitsienti.

Odatiy bo'lib, Yandex.Maps juda ko'p keraksiz elementlarni yaratadi, aksariyat hollarda veb-saytlarda kerak emas. Asosan, boshqaruv elementlariga va xaritaning xatti-harakatlariga ikkita shartni qo'llash kifoya:

1. xarita elementlaridan faqat kattalashtirish slayderi mavjud;
2. xaritani sichqonchani aylantirish bilan kattalashtirmaslik kerak.

Ushbu talablarni bajarish uchun biz kodni to'ldiramiz:

Bu erda biz o'chirib qo'ydik kattalashtirish va qo'shildi "kattalashtirishni boshqarish" yuqori chap burchakdan joylashtirilgan.

Endi biz xaritaga yorliq qo'shishimiz kerak, maqola uchun biz uning tasvirini http://medialoot.com/item/free-vector-map-location-pins/ dan yuklab olamiz va uni quyidagi tarzda kodga joylashtiramiz:

Bu erda biz o'zgaruvchini e'lon qilamiz myPlacemark, unda biz markerni yozamiz, birinchi parametrda ymaps.joy belgisi yorliq koordinatalarini belgilang va uchinchi parametrda:

1. ichida ko'rsating iconLayout moslashtirilgan yorliq tasviridan foydalanilishi;
2. iconImageHref- tasvirga yo'l;
3. iconImageSize- tasvir hajmini belgilash;
4. iconImageOffset- biz rasmning yuqori chap burchagidan rasmning nuqtasiga siljishni ko'rsatamiz, bu biz kerakli ob'ektga ishora qilamiz. Bu xarita masshtablanganda yorliqning joylashuvi adashmasligi uchun kerak. Nima uchun ofset salbiy qiymatlarda ko'rsatilgan - API yaratuvchisini faqat Xudo biladi.

Va orqali myMap.geoObjects.add() xaritaga marker qo'shing.

Va endi biz xarita yorlig'ini bosganimizda ko'rsatiladigan shar hosil qilamiz, sharning tartibini va uning tarkibini http://designdeck.co.uk/a/1241 dan olamiz.

ymaps.ready(init); init() funksiyasi (var myMap; myMap = new ymaps.Map ("xarita" , (markaz: [ 55.7652 , 37.63836 ] , masshtablash: 17 , boshqaruv elementlari: ) ); myMap.behaviors .disable ("scrollZoom"Map.) boshqaruv elementlari .add ("zoomControl" , (pozitsiya: ( tepa: 15 , chap: 15 ) ) ) ; var html = " "; html += "" ; html +=" "; html += " Viktoriya minorasi bog'lari " ; html += "" ; html +=" London shahri " ; html += "" ; html += " Birlashgan Qirollik " ; html += " 020 7641 5264 " ; html += " " ; html += " " ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIyaMaps1/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) ; )

Biz shu yerdamiz:

1. ichida balon tarkibi balon ochilganda ko'rsatiladigan tarkibni belgilang;
2. ballonLayout- balon tartibi sifatida maxsus tasvir ishlatilishini belgilang;
3. balloonContentSize va balloonImageSize— mos ravishda kontent va tasvirlarning oʻlchamlari;
4. balloonImageHref- tasvirga yo'l;
5. balloonImageOffset- yuqori chap burchakka nisbatan ofset;
6. sharli soya— sharning soyasini o'chirish (bu maxsus tasvirlar bilan hech narsaga ta'sir qilmaydi).

Chiqarish nomzodi - bu API versiyasi bo'lib, u ommaviy foydalanish uchun mavjud, ammo hali ham tasdiqlanyapti. Chiqarish nomzodini barqaror versiya sifatida o'rnatishdan oldin, u chiqarilishi bilanoq, u API funksiyasining buzilishiga olib kelishi mumkin bo'lgan xatolar uchun sinovdan o'tkaziladi. Loyihalaringizda reliz nomzodlaridan foydalanish orqali siz bizga mumkin bo'lgan xatolarni o'z vaqtida aniqlashda yordam bera olasiz. Bundan tashqari, API ning yangi versiyasi bilan ilovangiz ishini oldindan sinab ko'rishingiz mumkin.

Chiqaruvchi nomzodlar ilovalarni ishlab chiqish va sinov muhitida ishlatilishi kerak. Bu ishlab chiqarish muhitida xatolardan qochishga yordam beradi. Chiqaruvchi nomzodni quyidagi tarzda yoqishingiz mumkin:

Eng boshida biz xaritalar API-ni http://api-maps.yandex.ru/ manziliga ulaymiz.

Keling, variantlarni batafsil ko'rib chiqaylik:

lang - til_region ikkita parametr bilan o'rnatiladi,

til - ikki xonali til kodi. ISO 639-1 formatida ko'rsatilgan.
mintaqa - ikki xonali mamlakat kodi. ISO 3166-1 formatida ko'rsatilgan.

Ustida bu daqiqa quyidagi mahalliy tillar qo'llab-quvvatlanadi:

lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.

Qo'shimcha variantlardan foydalanish mumkin:

koordorder - geografik koordinatalar uzunlik-kenglik juftlarini kirish sifatida qabul qiluvchi API funktsiyalarida ko'rsatilgan tartib (masalan, Placemark).

Mumkin qiymatlar:

latlong - [kenglik, uzunlik] - sukut bo'yicha ishlatiladi;
longlat - [uzunlik, kenglik].

Standart qiymat: latlong.

yuklash - Yuklanadigan modullar ro'yxati.

Standart qiymat: package.full.

rejimi - API yuklash rejimi.

mode=release - brauzerda trafik va ijro tezligini minimallashtirish uchun API kodini paketlangan shaklda yuklab olish mumkin;
mode=debug - manba kodi sifatida yuklab olish rejimi.

Standart qiymat: chiqarish.

Ulanish imkoniyatlari haqida ko'proq o'qing

Xaritani ko'rsatish uchun nolga teng bo'lmagan o'lchamdagi konteyner ko'rsatilgan, har qanday blok tipidagi HTML elementi konteyner sifatida ishlatilishi mumkin, misolda u div.

Xarita parametrlari kodda o'rnatiladi:

myMap = yangi ymaps.Map('xarita', (
markaz: , // Nijniy Novgorod xaritasining markazi
masshtablash: 12 - masshtablash darajasi
});

Xarita butun veb-sahifa yuklangandan keyin yaratilishi kerak. Bu xarita uchun konteyner yaratilganiga ishonch hosil qiladi va unga id orqali kirish mumkin. Sahifani yuklagandan keyin xaritani ishga tushirish uchun tayyor() funksiyasidan foydalanishingiz mumkin.

Tayyor funksiya API yuklanganda va DOM yaratilganda chaqiriladi.

ymaps.ready(init);

init()(
// Xaritaning namunasini yarating va uni konteynerga bog'lang
// berilgan id ("xarita").
myMap = yangi ymaps.Map('xarita', (
// Xaritani ishga tushirishda siz belgilashingiz kerak
// uning markazi va masshtab omili.
markaz: , // Nijniy Novgorod
kattalashtirish: 12
});

Odatiy bo'lib, xaritada barcha mavjud boshqaruv elementlari ko'rsatiladi.

Xarita turi - sxema.

API beshta o'rnatilgan xarita turlarini taqdim etadi:

Sxema (yandex#map) - sukut bo'yicha;
Sun'iy yo'ldosh (yandex # sun'iy yo'ldosh);
Gibrid (yandex # gibrid);
Xalq xaritasi (yandex#publicMap);
Milliy xaritaning gibridi (yandex#publicMapHybrid).

Sun'iy yo'ldosh xaritasi turini aniqlashga misol

Misol kod:

Yuqorida aytib o'tganimdek, "mediumMapDefaultSet" boshqaruvlarining standart to'plami sukut bo'yicha xaritaga qo'shiladi.

Xaritaga kerakli boshqaruv elementlarini qo'shish uchun siz xaritani yaratishda boshqaruv elementlari parametrida mos keladigan tugmalar ro'yxatini belgilashingiz mumkin.

Bu yerda xarita masshtabini va turini boshqarish uchun namuna kodi.

Misol kod:

Xaritalar parametri yordamida xaritaning harakatini o'rnatish mumkin.

Uning qiymatlarini belgilash orqali biz xaritaning xatti-harakatlari uchun turli xil variantlarni yoqishimiz yoki o'chirishimiz mumkin:

sichqoncha tugmasini ikki marta bosish orqali xaritani masshtablash;

sichqoncha yoki bitta tegish bilan xaritani sudrab borish;

sichqonchaning chap tugmasi bilan hududni tanlashda xaritani masshtablash;

multi-touchli teginish bilan xaritani masshtablash;

hududni tanlashda xaritani masshtablash o'ng tugmasini bosing sichqonlar;

masofani o'lchash;

sichqonchaning g'ildiragi yordamida xaritani kattalashtirish.

Sichqoncha g'ildiragini kattalashtirish o'chirilgan kod misoli.

Xarita yaratilgandan so'ng uning parametrlarini o'zgartirish mumkin.

Sichqoncha g'ildiragini kattalashtirishni yoqing

myMap.behaviors.enable("scrollZoom");

O'chirib qo'yish

myMap.behaviors.disable("scrollZoom");

Xaritaning yangi turini o'rnatish Xalq

myMap.setType('yandex#publicMap');

Yangi xarita markazini sozlash

Hozircha hammasi shu.

Davomi bor…