Yandex maps api 2.1 անցում

Այս հոդվածում ես ուզում եմ սկսել հոդվածների շարք Yandex.Maps API-ի հետ աշխատելու վերաբերյալ: Yandex.Maps-ի փաստաթղթերը բավականին ամբողջական են, բայց դրա մեջ տեղեկատվության մասնատվածության աստիճանը բարձր է, երբ առաջին անգամ առանց կես լիտրի փաստաթղթերը մուտքագրում ես, չես կարողանում հասկանալ, և խնդիրը լուծելու համար կարող ես ծախսել շատ ժամանակ փնտրել փաստաթղթերի և որոնման համակարգում: Հոդվածների այս շարքը կխոսի ամենավերջին, այս գրելու պահին, 2.1 տարբերակի Yandex.Maps API-ի օգտագործման ամենատարածված դեպքերի գործնական լուծումների մասին:

Կայքը կոնտակտային տեղեկատվության մեջ դնելիս հաճախ անհրաժեշտ է լինում տեղադրել քարտեզ, որի վրա կնշվի այն կազմակերպության գտնվելու վայրը, որի համար կայքը մշակվում է: Ամենապարզ դեպքերում սա կարող է լինել ընդամենը սքրինշոթ առցանց քարտեզներից (կամ ոչ առցանց).

Ներդիրի համար ինտերակտիվ քարտեզկարող է օգտագործվել քարտեզի ստեղծող
https://tech.yandex.ru/maps/tools/constructor/ :

Եթե ​​մեզ անհրաժեշտ է քարտեզների ավելի առաջադեմ օգտագործում (մեր սեփական պիտակները, քարտեզների ծրագրային տեղաշարժը և այլն), ապա դրա համար մենք պետք է օգտագործենք Yandex.Maps API-ը՝ https://tech.yandex.ru/maps/jsapi/ . Որպես քարտեզներ օգտագործելու օրինակ՝ այս հոդվածը կանդրադառնա քարտեզի ստեղծմանը հատուկ պիտակի և օդապարիկի պարզ հավելումով:

Նախ, եկեք միացնենք API-ի բաղադրիչները.

Եթե ​​ինչ-որ մեծ հավելված մշակվում է քարտեզների միջոցով, ապա ավելի լավ է միացնել որոշակի տարբերակի API բաղադրիչները, որպեսզի Yandex-ի կողմից API-ն թարմացնելիս արտադրության մեջ ոչինչ չխախտվի.

Քարտեզը պետք է տեղադրվի ինչ-որ բլոկում, օրինակ՝ ներսում div#քարտեզ. Հաջորդը, քարտեզը պետք է ստեղծվի այս բլոկում (քարտեզի և DOM-ի պատրաստության իրադարձությունը գործարկելուց հետո).

ymaps.ready(init) ; ֆունկցիա init() (var myMap; myMap = նոր ymaps.Map («քարտեզ», (կենտրոն՝ [55.76, 37.64], խոշորացում՝ 7)) ;)

Այստեղ մենք նշում ենք.

  1. բլոկի նույնացուցիչ քարտեզ, որտեղ մենք կստեղծենք քարտեզ;
  2. կենտրոն- քարտեզի կենտրոնը, որը ցույց է տալիս լայնությունը և երկայնությունը.
  3. խոշորացում- քարտեզի մասշտաբի գործակից:

Լռելյայնորեն Yandex.Maps-ը ստեղծում է շատ ավելորդ տարրեր, որոնք շատ դեպքերում անհրաժեշտ չեն կայքերում: Հիմնականում բավական է կիրառել 2 պայման հսկիչների և քարտեզի վարքագծի նկատմամբ.

  1. քարտեզի տարրերից առկա է միայն խոշորացման սահիչը.
  2. քարտեզը չպետք է մեծացվի մկնիկի ոլորման միջոցով:

Այս պահանջները կատարելու համար մենք լրացնում ենք կոդը.

ymaps.ready(init) ; ֆունկցիա init() ( var myMap; myMap = նոր ymaps.Map («քարտեզ», (կենտրոն՝ [55.76, 37.64], խոշորացում՝ 13, կառավարներ՝ )) ; myMap.behaviors .disable («scrollZoom» ) ;myMap. controls .add ("zoomControl" , ( դիրքը՝ (վերևում: 15, ձախը՝ 15) ) ;)

Այստեղ մենք հաշմանդամ ենք scrollzoomև ավելացրեց «Խոշորացման վերահսկում»տեղադրված վերևի ձախ անկյունից:

Այժմ մենք պետք է պիտակ ավելացնենք քարտեզի վրա, հոդվածի համար մենք կներբեռնենք դրա պատկերը http://medialoot.com/item/free-vector-map-location-pins/-ից և կտեղադրենք կոդի մեջ հետևյալ կերպ.

ymaps.ready(init) ; ֆունկցիա init() (var myMap; myMap = նոր ymaps.Map («քարտեզ», (կենտրոն՝ [55.7652, 37.63836], խոշորացում՝ 17, կառավարներ՝ )) ; myMap.behaviors .disable («scrollZoom;) controls .add ("zoomControl" , ( դիրքը՝ (վերևում՝ 15, ձախ՝ 15 ) ) ) ; var myPlacemark = նոր ymaps. Placemark ([ 55.7649 , 37.63836 ] , ( ) , (iconLayout: "image"erefult , iconImageSize՝ [ 40 , 51 ] , iconImageOffset՝ [ - 20 , - 47 ] ) ), myMap.geoObjects .add (myPlacemark) ;)

Այստեղ մենք հայտարարում ենք փոփոխական myPlacemark, որում գրում ենք նշիչը՝ առաջին պարամետրում ymaps.Տեղադրոշմնշեք պիտակի կոորդինատները, իսկ երրորդ պարամետրում.

  1. նշել մեջ iconLayoutոր կօգտագործվի հատուկ պիտակի պատկեր.
  2. iconImageHref- ճանապարհ դեպի պատկեր;
  3. iconImageSize- նշեք պատկերի չափը;
  4. iconImageOffset- նշում ենք նկարի վերին ձախ անկյունից դեպի պատկերի այն կետի տեղաշարժը, որը ցույց ենք տալիս մեզ անհրաժեշտ առարկան: Դա անհրաժեշտ է, որպեսզի երբ քարտեզը մասշտաբավորվի, պիտակի դիրքը չշեղվի: Ինչու է օֆսեթը նշվում բացասական արժեքներով - միայն Աստված գիտի API-ի ստեղծողին:

Եվ միջոցով myMap.geoObjects.add()քարտեզի վրա նշիչ ավելացնել:

Եվ հիմա մենք կպատրաստենք փուչիկ, որը կցուցադրվի, երբ սեղմենք քարտեզի պիտակի վրա, մենք կվերցնենք օդապարիկի դասավորությունը և դրա պարունակությունը http://designdeck.co.uk/a/1241-ից:

ymaps.ready(init) ; ֆունկցիա init() (var myMap; myMap = նոր ymaps.Map («քարտեզ», (կենտրոն՝ [55.7652, 37.63836], խոշորացում՝ 17, կառավարներ՝ )) ; myMap.behaviors .disable («scrollZoom;) controls .add ("zoomControl" , ( դիրքը՝ (վերևում՝ 15, ձախ՝ 15 ) ) ) ; var 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 , 151 Imagon ], ballo «http://site/files/APIYaMaps1/min_popup.png», balloonImageOffset՝ [ - 144 , - 147 ] , balloonImageSize՝ [ 289 , 151 ] , BalloonShadow՝ false ) ; myMap.geoObjects .add (myPlacemark) ; )

Մենք այստեղ ենք.

  1. մեջ փուչիկի բովանդակություննշեք այն բովանդակությունը, որը կցուցադրվի օդապարիկի բացման ժամանակ.
  2. BalloonLayout- նշեք, որ հարմարեցված պատկերը կօգտագործվի որպես փուչիկի դասավորություն;
  3. BalloonContentSizeև BalloonImageSize— համապատասխանաբար բովանդակության և պատկերների չափերը.
  4. balloonImageHref- ճանապարհ դեպի պատկեր;
  5. balloonImageOffset- վերին ձախ անկյունի համեմատությամբ օֆսեթ;
  6. BalloonShadow— անջատել փուչիկի ստվերը (այն չի ազդում որևէ բանի վրա հատուկ պատկերների վրա):

Թողարկման թեկնածուն API-ի տարբերակն է, որը հասանելի է հանրային օգտագործման համար, բայց դեռ հաստատման փուլում է: Նախքան թողարկման թեկնածուն որպես կայուն տարբերակ տեղադրելը, հենց այն թողարկվի, այն փորձարկվում է վրիպակների համար, որոնք կարող են հանգեցնել API-ի ֆունկցիոնալության վատթարացման: Օգտագործելով թողարկման թեկնածուներ ձեր նախագծերում, դուք կարող եք օգնել մեզ ժամանակին բացահայտել հնարավոր սխալները: Դուք կարող եք նաև նախապես ստուգել ձեր հավելվածի աշխատանքը API-ի նոր տարբերակով:

Թողարկման թեկնածուները պետք է օգտագործվեն հավելվածի մշակման և փորձարկման միջավայրում: Սա կօգնի ձեզ խուսափել արտադրության միջավայրում սխալներից: Դուք կարող եք միացնել ազատման թեկնածուին հետևյալ կերպ.



Հենց սկզբում մենք կապում ենք քարտեզների API-ն http://api-maps.yandex.ru/ հասցեով:

Եկեք ավելի մանրամասն նայենք տարբերակներին.

lang - սահմանվում է երկու պարամետրով language_region,

լեզու - երկնիշ լեզվի ծածկագիր: Նշված է ISO 639-1 ձևաչափով:
տարածաշրջան - երկնիշ երկրի կոդը: Նշված է ISO 3166-1 ձևաչափով:

Վրա այս պահինաջակցվում են հետևյալ տեղանքները.

lang=ru_RU;
lang=en_ԱՄՆ;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.

Լրացուցիչ ընտրանքներ կարող են օգտագործվել.

coordorder - աշխարհագրական կոորդինատների ճշգրտման հերթականությունը API ֆունկցիաներում, որոնք ընդունում են երկայնություն-լայնություն զույգերը որպես մուտք (օրինակ՝ Placemark):

Հնարավոր արժեքներ.

latlong - [լայնություն, երկայնություն] - օգտագործվում է լռելյայն;
longlat - [երկայնություն, լայնություն]:

Կանխադրված արժեքը՝ latlong:

load - բեռնման մոդուլների ցանկ:

Կանխադրված արժեքը՝ package.full:

ռեժիմ - API բեռնման ռեժիմ:

mode=release - API կոդը կարելի է ներբեռնել փաթեթավորված տեսքով՝ զննարկիչում երթևեկությունը և կատարման արագությունը նվազագույնի հասցնելու համար;
ռեժիմ=վրիպազերծում - ներբեռնման ռեժիմ՝ որպես սկզբնաղբյուր:

Կանխադրված արժեքը՝ թողարկում:

Կարդացեք ավելին միացման տարբերակների մասին

Քարտեզը ցուցադրելու համար նշվում է ոչ զրոյական չափի կոնտեյներ, որպես կոնտեյներ կարող է օգտագործվել ցանկացած բլոկ տիպի HTML տարր, օրինակում այն ​​div է։

Քարտեզի պարամետրերը սահմանվում են ծածկագրում.

myMap = նոր ymaps.Map('քարտեզ', (
կենտրոն՝ , // Նիժնի Նովգորոդի քարտեզի կենտրոն
խոշորացում: 12 - խոշորացման մակարդակ
});

Քարտեզը պետք է ստեղծվի ամբողջ վեբ էջը բեռնելուց հետո: Սա թույլ կտա համոզվել, որ քարտեզի համար նախատեսված կոնտեյները ստեղծվել է և հասանելի է id-ով: Էջի բեռնումից հետո քարտեզը սկզբնավորելու համար կարող եք օգտագործել ready() ֆունկցիան:

Պատրաստ գործառույթը կկանչվի, երբ API-ն բեռնվի և DOM-ը ստեղծվի:

ymaps.ready(init);

ֆունկցիա init()(
// Ստեղծեք քարտեզի օրինակ և կապեք այն կոնտեյների հետ
// տրված id («քարտեզ»):
myMap = նոր ymaps.Map('քարտեզ', (
// Քարտեզը սկզբնավորելիս պետք է նշեք
// դրա կենտրոնը և մասշտաբի գործակիցը:
կենտրոն՝ , // Նիժնի Նովգորոդ
խոշորացում՝ 12
});

Լռելյայնորեն քարտեզը ցուցադրում է բոլոր հասանելի վերահսկիչները:

Քարտեզի տեսակը - սխեման:

API-ն ապահովում է հինգ ներկառուցված քարտեզի տեսակներ.

Սխեման (yandex#map) - լռելյայն;
Արբանյակային (yandex#satellite);
Հիբրիդ (yandex#hybrid);
Մարդկանց քարտեզ (yandex#publicMap);
Ազգային քարտեզի հիբրիդ (yandex#publicMapHybrid):

Քարտեզի տեսակը որոշելու օրինակ Արբանյակ

Օրինակ կոդը:

Քարտեզի հետևում տիպ - Արբանյակային: Yandex.Maps API 2.1-ի միջոցով քարտեզ ստեղծելու օրինակ:



Ինչպես նախկինում ասացի, «mediumMapDefaultSet» հսկիչների լռելյայն հավաքածուն լռելյայն ավելացվում է քարտեզին:

Քարտեզին անհրաժեշտ կառավարումներն ավելացնելու համար քարտեզը ստեղծելիս կարող եք վերահսկման պարամետրում նշել համապատասխան ստեղների ցանկը:

Ահա քարտեզի մասշտաբի և տիպի վերահսկման կոդը:

Օրինակ կոդը:



Քարտեզի վերահսկում. Yandex.Maps API 2.1-ի միջոցով քարտեզ ստեղծելու օրինակ:



Հնարավոր է սահմանել քարտեզի վարքագիծը՝ օգտագործելով վարքագծերի պարամետրը:

Սահմանելով դրա արժեքները՝ մենք կարող ենք միացնել կամ անջատել քարտեզի վարքագծի տարբեր տարբերակներ.

քարտեզի մասշտաբում՝ մկնիկի կոճակի վրա կրկնակի սեղմելով;

քարտեզը մկնիկի կամ մեկ հպումով քաշել;

քարտեզի մասշտաբում մկնիկի ձախ կոճակով տարածք ընտրելիս;

քարտեզի մասշտաբում բազմակի հպումով;

տարածք ընտրելիս քարտեզի մասշտաբը աջ սեղմումմկներ;

հեռավորության չափում;

քարտեզը խոշորացնել մկնիկի անիվով:

Կոդի օրինակ՝ մկնիկի անիվի խոշորացումն անջատված է:



Քարտեզի վարքագծի վերահսկում: Yandex.Maps API 2.1-ի միջոցով քարտեզ ստեղծելու օրինակ:



Քարտեզի ստեղծվելուց հետո հնարավոր է փոխել պարամետրերը:

Միացրեք մկնիկի անիվի խոշորացումը

myMap.behaviors.enable ("scrollZoom");

Անջատել

myMap.behaviors.disable("scrollZoom");

Նոր տեսակի քարտեզի տեղադրում Ժողովրդական

myMap.setType ('yandex#publicMap');

Նոր քարտեզի կենտրոնի ստեղծում

Առայժմ այսքանը:

Շարունակելի…