Yandex maps 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 კომპონენტები:

თუ რაიმე დიდი აპლიკაციის შემუშავება ხდება რუქების გამოყენებით, მაშინ უმჯობესია დააკავშიროთ გარკვეული ვერსიის API კომპონენტები ისე, რომ Yandex-ის მხარეს API-ს განახლებისას არაფერი დაირღვეს წარმოებაში:

რუკა უნდა განთავსდეს რომელიმე ბლოკში, მაგალითად div# რუკა. შემდეგი, რუკა უნდა შეიქმნას ამ ბლოკში (მას შემდეგ, რაც რუკა და DOM მზადყოფნის ღონისძიება ამოქმედდება):

ymaps.ready(init) ; ფუნქცია init() (var myMap; myMap = new ymaps.Map ("რუკა" , (ცენტრი: [55.76, 37.64], მასშტაბირება: 7)) ;)

აქ ჩვენ მივუთითებთ:

  1. ბლოკის იდენტიფიკატორი რუკა, სადაც შევქმნით რუკას;
  2. ცენტრი- რუქის ცენტრი, რომელიც მიუთითებს სიგანეზე და გრძედზე;
  3. მასშტაბირება- რუკის მასშტაბის ფაქტორი.

ნაგულისხმევად, Yandex.Maps ქმნის უამრავ არასაჭირო ელემენტს, რომელიც უმეტეს შემთხვევაში არ არის საჭირო ვებსაიტებზე. ძირითადად, საკმარისია 2 პირობის გამოყენება სამართავებზე და რუკის ქცევაზე:

  1. რუკის ელემენტებიდან მხოლოდ მასშტაბირების სლაიდერია;
  2. რუკა არ უნდა გადიდდეს მაუსის გადახვევით.

ამ მოთხოვნების შესასრულებლად, ჩვენ ვავსებთ კოდს:

ymaps.ready(init) ; ფუნქცია init() ( var myMap; myMap = new ymaps.Map ("რუკა" , (ცენტრი: [55.76, 37.64], მასშტაბირება: 13, კონტროლი: )) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. კონტროლი .დამატება ("zoomControl" , ( პოზიცია: ( ზევით: 15 , მარცხნივ: 15 ) ) ;)

აქ ჩვენ გამორთეთ გადახვევის მასშტაბირებადა დაამატა "ზუმის კონტროლი"განლაგებულია ზედა მარცხენა კუთხიდან.

ახლა ჩვენ უნდა დავამატოთ ეტიკეტი რუკაზე, სტატიისთვის გადმოვწერთ მის სურათს http://medialoot.com/item/free-vector-map-location-pins/-დან და მოვათავსებთ კოდში შემდეგნაირად:

ymaps.ready(init) ; ფუნქცია init() ( var myMap; myMap = new ymaps.Map ("რუკა" , (ცენტრი: [55.7652, 37.63836], მასშტაბირება: 17, კონტროლი: )) ; myMap.behaviors .disable ("scrollZoom.) controls .add ("zoomControl" , ( პოზიცია: ( ზევით: 15 , მარცხნივ: 15 ) ) ) ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "default#Image" : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ) ; myMap.geoObjects .დამატება (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 = new ymaps.Map ("რუკა" , (ცენტრი: [55.7652, 37.63836], მასშტაბირება: 17, კონტროლი: )) ; myMap.behaviors .disable ("scrollZoom.) კონტროლი .დამატება ("zoomControl" , ( პოზიცია: ( ზევით: 15 , მარცხნივ: 15 ) ) ) ; var html = "
"; html += "" ; html +="
"; html += "

ვიქტორია თაუერის ბაღები

" ; html += "" ; html +="

ქალაქი ლონდონი

" ; html += "" ; html += "

გაერთიანებული სამეფო

"; 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 , 151 Imagon I ] , ballo "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , BalloonShadow: false ) ; myMap.geoObjects .add (myPlacemark) ; )

Ჩვენ აქ ვართ:

  1. in ბუშტის შინაარსიმიუთითეთ შინაარსი, რომელიც გამოჩნდება ბუშტის გახსნისას;
  2. ბურთის განლაგება- მიუთითეთ, რომ მორგებული სურათი გამოყენებული იქნება ბუშტის განლაგებად;
  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.

დამატებითი პარამეტრების გამოყენება შესაძლებელია:

კოორდერდერი - თანმიმდევრობა, რომლითაც გეოგრაფიული კოორდინატები მითითებულია API ფუნქციებში, რომლებიც იღებენ გრძედი-გრძედი წყვილებს შეყვანად (მაგალითად, ადგილის ნიშანს).

შესაძლო მნიშვნელობები:

ლატლონგი - [გრძედი, გრძედი] - გამოიყენება ნაგულისხმევად;
ლონგლატი - [გრძედი, გრძედი].

ნაგულისხმევი მნიშვნელობა: latlong.

load - ჩატვირთვის მოდულების სია.

ნაგულისხმევი მნიშვნელობა:pack.full.

რეჟიმი - API ჩატვირთვის რეჟიმი.

mode=release - API კოდის ჩამოტვირთვა შესაძლებელია შეფუთული ფორმით, ბრაუზერში ტრაფიკის და შესრულების სიჩქარის შესამცირებლად;
mode=debug - ჩამოტვირთვის რეჟიმი, როგორც საწყისი კოდი.

ნაგულისხმევი მნიშვნელობა: გამოშვება.

წაიკითხეთ მეტი კავშირის ვარიანტების შესახებ

რუქის საჩვენებლად მითითებულია არანულოვანი ზომის კონტეინერი, კონტეინერად შეიძლება გამოყენებულ იქნას ნებისმიერი ბლოკის ტიპის 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');

ახალი რუქის ცენტრის დაყენება

ჯერჯერობით სულ ესაა.

Გაგრძელება იქნება…

მსგავსი პოსტები