Yandex mapuje przejście API 2.1

W tym artykule chcę rozpocząć serię artykułów na temat pracy z API Yandex.Maps. Dokumentacja Yandex.Maps jest dość kompletna, ale stopień fragmentacji zawartych w niej informacji jest wysoki, kiedy po raz pierwszy wchodzisz do dokumentacji bez pół litra, nie możesz tego rozgryźć, a aby rozwiązać problem, możesz wydać dużo czasu na przeszukiwanie dokumentacji i wyszukiwarki. W tej serii artykułów omówimy praktyczne rozwiązania najczęstszych przypadków korzystania z API Yandex.Maps najnowszej, w chwili pisania tego tekstu, wersji 2.1.

Podczas układania witryny w informacjach kontaktowych często konieczne jest wstawienie mapy, na której zostanie zaznaczona lokalizacja organizacji, dla której tworzona jest witryna. W najprostszych przypadkach może to być po prostu zrzut ekranu z map online (lub nie online):

Do wkładu interaktywna mapa można użyć konstruktora map
https://tech.yandex.ru/maps/tools/constructor/ :

Jeśli potrzebujemy bardziej zaawansowanego wykorzystania map (własne etykiety, programowe przesuwanie map itp.), to w tym celu musimy skorzystać z API Yandex.Maps: https://tech.yandex.ru/maps/jsapi/ . Jako przykład korzystania z map, w tym artykule przyjrzymy się tworzeniu mapy z prostym dodaniem niestandardowej etykiety i odnośnika.

Najpierw połączmy komponenty API:

Jeśli jakaś duża aplikacja jest opracowywana przy użyciu map, lepiej jest połączyć komponenty API określonej wersji, aby podczas aktualizacji API po stronie Yandex nic się nie zepsuło w produkcji:

Mapa będzie musiała zostać umieszczona w jakimś bloku, na przykład w div#mapa. Następnie mapa musi zostać utworzona w tym bloku (po wywołaniu zdarzenia gotowości mapy i DOM):

ymaps.ready(init) ; function init() ( var mojaMapa; mojaMapa = new ymaps.Map („mapa” , (środek: [55,76 , 37,64 ] , powiększenie: 7 ) ) ; )

Tutaj wskazujemy:

  1. identyfikator bloku mapa, gdzie utworzymy mapę;
  2. Centrum— środek mapy wskazujący szerokość i długość geograficzną;
  3. Powiększenie— współczynnik skali mapy.

Domyślnie Yandex.Maps tworzy wiele niepotrzebnych elementów, które w większości przypadków nie są potrzebne na stronach internetowych. Zasadniczo wystarczy zastosować 2 warunki do sterowania i zachowania mapy:

  1. spośród elementów mapy obecny jest tylko suwak powiększenia;
  2. mapy nie należy powiększać za pomocą przewijania myszy.

Aby spełnić te wymagania, uzupełniamy kod:

ymaps.ready(init) ; function init() ( var mojaMapa; mojaMapa = new ymaps.Map („mapa” , (środek: [ 55,76 , 37,64 ] , powiększenie: 13 , sterowanie: ) ); myMap.behaviors .disable („scrollZoom” ); mojaMapa. kontrole .add („zoomControl” , ( pozycja: ( góra: 15 , lewa: 15 ) ) ) ; )

Tutaj mamy wyłączone przewijanie i dodał "sterowanie zoomem" umieszczony od lewego górnego rogu.

Teraz musimy dodać etykietę do mapy, dla artykułu pobierzemy jej obraz z http://medialoot.com/item/free-vector-map-location-pins/ i umieścimy go w kodzie w następujący sposób:

ymaps.ready(init) ; function init() ( var mojaMapa; myMap = new ymaps.Map („mapa” , (środek: [ 55.7652 , 37.63836 ] , powiększenie: 17 , sterowanie: ) ); myMap.behaviors .disable („scrollZoom” ); myMap. kontrole .add („zoomControl” , ( pozycja: ( góra: 15 , lewa: 15 ) ) ) var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: „default#image” , iconImageHref : , iconImageSize: [ 40 , 51 ] , iconImage Offset: [ - 20 , - 47 ] ) ); myMap.geoObjects .add (myPlacemark) ; )

Tutaj deklarujemy zmienną mojeOznaczenie miejsca, w którym wpisujemy znacznik, w pierwszym parametrze ymaps.Oznaczenie miejsca podaj współrzędne etykiety, a w trzecim parametrze:

  1. wskazać w ikonaUkładże zostanie użyty niestandardowy obraz etykiety;
  2. ikonaObrazHref- ścieżka do obrazu;
  3. ikonaRozmiar obrazu- określ rozmiar obrazu;
  4. ikonaObrazPrzesunięcie- wskazujemy przesunięcie od lewego górnego rogu obrazu do punktu obrazu, którym wskazujemy na potrzebny nam obiekt. Jest to konieczne, aby podczas skalowania mapy pozycja etykiety nie zbłądziła. Dlaczego offset jest wskazany w wartościach ujemnych - tylko Bóg zna twórcę API.

I przez mojaMapa.geoObjects.add() dodaj znacznik do mapy.

A teraz zróbmy balon, który pokaże się po kliknięciu etykiety mapy, weźmiemy układ balonu i jego zawartość z http://designdeck.co.uk/a/1241

ymaps.ready(init) ; function init() ( var mojaMapa; myMap = new ymaps.Map („mapa” , (środek: [ 55.7652 , 37.63836 ] , powiększenie: 17 , sterowanie: ) ); myMap.behaviors .disable („scrollZoom” ); myMap. kontrole .add („zoomControl” , ( pozycja: ( góra: 15 , lewa: 15 ) ) ); var html = „
"; html += "" ; html +="
"; html += "

Ogrody Victoria Tower

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

Londyn

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

Zjednoczone Królestwo

" ; html += "

020 7641 5264

" ; html += "
" ; html += "
"; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , (ballonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIYaMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImage Offset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balonImageHref: "http://site/files/APIYaMaps1/min_popup.png", balonImageOffset: [ - 144 , - 147 ] , balonImageSize: [ 289 , 151 ] , balon Cień: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Tutaj my:

  1. w BalonZawartość określ treść, która będzie wyświetlana po otwarciu balonu;
  2. balonUkład- określ, że jako układ dymków zostanie użyty niestandardowy obraz;
  3. balonZawartośćRozmiar oraz rozmiar obrazu balonu— odpowiednio rozmiary treści i obrazów;
  4. balonObrazHref- ścieżka do obrazu;
  5. przesunięcie obrazu balonu- przesunięcie względem lewego górnego rogu;
  6. balonCień— wyłączenie cienia balonu (nie wpływa na nic z niestandardowymi obrazami).

Wersja Release Candidate to wersja API, która jest dostępna do użytku publicznego, ale wciąż jest w trakcie zatwierdzania. Przed zainstalowaniem Release Candidate jako wersji stabilnej, zaraz po jej wydaniu, jest ona testowana pod kątem błędów, które mogą prowadzić do degradacji funkcjonalności API. Używając kandydatów do wydania w swoich projektach, możesz pomóc nam w odpowiednim czasie zidentyfikować potencjalne błędy. Możesz także wstępnie przetestować działanie aplikacji z nową wersją interfejsu API.

Kandydatów do wydania należy używać w środowisku programistycznym i testowym aplikacji. Pomoże to uniknąć błędów w środowisku produkcyjnym. Możesz włączyć kandydata do wydania w następujący sposób:



Na samym początku łączymy API map pod adresem http://api-maps.yandex.ru/

Przyjrzyjmy się opcjom bardziej szczegółowo:

lang - ustawiany dwoma parametrami region_języka,

język - dwucyfrowy kod języka. Określone w formacie ISO 639-1.
region - dwucyfrowy kod kraju. Określone w formacie ISO 3166-1.

Na ten moment obsługiwane są następujące ustawienia regionalne:

lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
język=tr_TR.

Można zastosować dodatkowe opcje:

coordorder — kolejność, w jakiej współrzędne geograficzne są określane w funkcjach API, które akceptują pary długość-szerokość geograficzna jako dane wejściowe (na przykład oznaczenie miejsca).

Możliwa wartość:

latlong - [szerokość, długość geograficzna] - używany domyślnie;
longlat - [długość, szerokość geograficzna].

Wartość domyślna: latlong.

load - Lista modułów do załadowania.

Wartość domyślna: pakiet.pełny.

tryb - tryb ładowania interfejsu API.

mode=release - kod API można pobrać w formie spakowanej, aby zminimalizować ruch i szybkość wykonywania w przeglądarce;
mode=debug - tryb pobierania jako kod źródłowy.

Wartość domyślna: zwolnij.

Przeczytaj więcej o opcjach połączenia

Aby wyświetlić mapę, określa się kontener o niezerowym rozmiarze, jako kontener można użyć dowolnego elementu HTML typu blokowego, w przykładzie jest to div.

Parametry mapy są ustawione w kodzie:

mojaMapa = new ymaps.Map('mapa', (
centrum: , // centrum mapy Niżny Nowogród
zoom: 12 - poziom powiększenia
});

Mapa powinna zostać utworzona po załadowaniu całej strony internetowej. Zapewni to, że kontener mapy został utworzony i można uzyskać do niego dostęp za pomocą identyfikatora. Aby zainicjować mapę po załadowaniu strony, możesz użyć funkcji ready().

Gotowa funkcja zostanie wywołana po załadowaniu API i wygenerowaniu DOM.

ymaps.ready(init);

funkcja init()(
// Utwórz instancję mapy i powiąż ją z kontenerem za pomocą
// podany identyfikator ("mapa").
mojaMapa = new ymaps.Map('mapa', (
// Podczas inicjalizacji mapy musisz określić
// jego środek i współczynnik skali.
centrum: , // Niżny Nowogród
powiększenie: 12
});

Domyślnie na mapie wyświetlane są wszystkie dostępne kontrolki.

Typ mapy - schemat.

Interfejs API udostępnia pięć wbudowanych typów map:

Schemat (yandex#map) - domyślnie;
Satelita (yandex#satelita);
Hybrydowy (yandex#hybrydowy);
Mapa ludzi (yandex#publicMap);
Hybryda mapy narodowej (yandex#publicMapHybrid).

Przykład z określeniem typu mapy Satelita

Przykładowy kod:

Za typem mapy - Satelita. Przykład tworzenia mapy przy użyciu Yandex.Maps API 2.1.



Jak powiedziałem wcześniej, domyślny zestaw kontrolek „mediumMapDefaultSet” jest domyślnie dodawany do mapy.

Aby dodać niezbędne kontrolki do mapy, możesz określić listę odpowiednich kluczy w parametrze kontrolek podczas tworzenia mapy.

Oto przykładowy kod kontrolek skali i typu mapy.

Przykładowy kod:

Sterowanie mapą. Przykład tworzenia mapy przy użyciu Yandex.Maps API 2.1.



Istnieje możliwość ustawienia zachowania mapy za pomocą parametru „behaviors”.

Ustawiając jego wartości, możemy włączyć lub wyłączyć różne opcje zachowania mapy:

skalowanie mapy poprzez dwukrotne kliknięcie myszką;

przeciąganie mapy myszką lub jednym dotknięciem;

skalowanie mapy przy zaznaczaniu obszaru lewym przyciskiem myszy;

skalowanie mapy za pomocą dotyku wielodotykowego;

skalowanie mapy podczas wybierania obszaru kliknij prawym przyciskiem myszy myszy;

pomiar odległości;

powiększanie mapy kółkiem myszy.

Przykład kodu z wyłączonym zoomem kółkiem myszy.

Kontrola zachowania mapy. Przykład tworzenia mapy przy użyciu Yandex.Maps API 2.1.



Istnieje możliwość zmiany parametrów mapy po jej utworzeniu.

Włącz powiększenie kółkiem myszy

myMap.behaviors.enable("scrollZoom");

Wyłączyć

myMap.behaviors.disable("scrollZoom");

Instalacja nowego typu mapy Folk

myMap.setType('yandex#publicMap');

Konfigurowanie nowego centrum mapy

To wszystko na teraz.

Ciąg dalszy nastąpi…

Podobne posty