Jak wstawić mapę lokalizacji z Map Google (Mapy Yandex). Jak włączyć nawigację

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):

Konstruktora mapy można użyć do wstawienia interaktywnej mapy
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) ; )

Jesteśmy tutaj:

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).

Mapa lokalizacji na stronie z adresem organizacji jest bardzo przyjaznym dla użytkownika przewodnikiem. Zgadzam się, bardzo praktyczne jest wejście na stronę i zobaczenie lokalizacji firmy bez otwierania dodatkowych zakładek w celu wyszukania adresu na mapie. To dodatkowy mały plus w skarbcu lojalności ze strony klienta w stosunku do organizacji.

Zwykle umieszczana jest mapa na stronie kontaktowej pod wskazanymi danymi kontaktowymi. Wprowadza się go za pomocą specjalnego kodu programu (skryptu). Najprostszym sposobem na uzyskanie takiego skryptu jest korzystając z gotowych rozwiązań API od Google lub Yandex. Aby wstawić mapę na stronę, nie jest wymagana znajomość programowania, postępując zgodnie z poniższymi instrukcjami, otrzymasz wizualną i wygodną mapę.

Wstawianie mapy za pomocą Yandex Maps

1. W tej chwili (początek 2013 r.) projektant map Yandex jest dostępny w wersji 2.0, co jest bardzo wygodne i logicznie zrozumiałe. Nie musisz nawet być autoryzowanym użytkownikiem, aby utworzyć kartę. Pierwszym krokiem jest utworzenie samej mapy z adresem. Aby to zrobić, kliknij link http://api.yandex.ru/maps/tools/constructor/ i wprowadź adres firmy w dolnym polu wejściowym. Po naciśnięciu przycisku „szukaj” system wyświetli warianty znalezionych adresów.

2. Stawiamy kropkę pod żądanym adresem i podajemy nazwę organizacji w polu opisu. Lepiej jest wybrać kolor kropki w oparciu o styl strony, na której będzie zlokalizowana mapa. Konstruktor umożliwia również zaznaczenie na mapie innych punktów orientacyjnych, takich jak znane duże obiekty, rozciągnięcie mapy do żądanego rozmiaru, wytyczenie trasy z przystanku autobusowego za pomocą narzędzia do rysowania linii, edycję skali.

3. Następnie przejdź do zakładki Widok. Tutaj możesz wybrać, czy Twoja mapa będzie statyczna czy interaktywna. Lepiej wybrać drugą opcję, dzięki czemu użytkownik będzie mógł zobaczyć okolicę i nawigować.

4. Zakładka „Osadź kod” oferuje przeczytanie umowy użytkownika. Po potwierdzeniu otrzymasz kod do umieszczenia na stronie. Możesz go trochę edytować, na przykład usunąć link do Yandex, dopasować go dokładniej, ale lepiej nie wprowadzać znaczących zmian.

5. Skopiuj ten kod i wklej go na stronie kontaktowej za pomocą edytora HTML po tekście.

6. Zapisujemy wprowadzone zmiany i sprawdzamy wynik na stronie serwisu.

Wstawianie mapy za pomocą Google Maps

1. Algorytm działań jest podobny do opisanego powyżej. Kliknij link http://maps.google.ru/maps i wprowadź adres organizacji w pasku wyszukiwania. Można też zobaczyć, jak to wygląda z satelity. Następnie, aby uzyskać kod, kliknij znak linku po lewej stronie. Możesz skopiować istniejący kod lub kliknąć link „skonfiguruj i wyświetl podgląd osadzonej mapy”.

2. Po wybraniu edycji otworzy się dodatkowe okno, w którym możesz dostosować jego rozmiar.

3. Skopiuj otrzymany kod i wklej go za pomocą edytora html na stronie serwisu. Będzie wyglądać dokładnie tak samo, jak na podglądzie. W przeciwieństwie do map Yandex, mapy Google są zawsze tylko interaktywne, możliwości edycji samej mapy jest mniej, ale można spojrzeć na teren z satelity, relief z nazwami obiektów i mapę 3D.

Jeśli jesteś programistą lub właścicielem komercyjnego projektu WordPress, takiego jak sklep internetowy, na pewnym etapie może być konieczne podanie współrzędnych firmy lub adresu sklepu fizycznego. Oczywiście adres można napisać zwykłym tekstem i umieścić w kontaktach, ale z punktu widzenia wygody użytkownika nie jest to najlepsza opcja.

Najlepszym rozwiązaniem byłoby umieszczenie mapy ze wskazówkami lub etykietą w miejscu lokalizacji biura.

Można go umieścić w sekcji kontakt, aby klienci mogli wizualnie określić, jak dostać się do Twojego biura. Do tych celów wskazane jest korzystanie z usługi Yandex, ponieważ jest ona bardziej skoncentrowana na rosyjskojęzycznych użytkownikach.

Wstawianie mapy Yandex na stronie WordPress jest dość proste. Możesz albo natychmiast użyć interfejsu API Yandex, aby go utworzyć i uzyskać kod do umieszczenia, albo zainstalować specjalną wtyczkę, która zrobi wszystko za Ciebie przy użyciu tego samego interfejsu API.

Umieszczanie za pośrednictwem interfejsu API Yandex

Wniosek

Jak widać, obie metody umieszczania map Yandex są dość proste. Trudności mogą pojawić się tylko na starszych wersjach WordPressa, ale wszystko rozwiązuje się za pomocą szablonów. Oprócz tych dwóch metod istnieje kilka innych, które pozwalają na korzystanie z bardziej złożonych funkcji, takich jak śledzenie pojazdów. Funkcje te są implementowane ręcznie za pośrednictwem interfejsu API Yandex, co będzie wymagało pewnych umiejętności programistycznych.

Aby witryna mogła być wyszukiwana w Yandex.Maps, musi być zarejestrowana w Yandex.Directory.

Aby umieścić fragment mapy na swojej stronie, musisz wypełnić kilka pól w konstruktorze. Przypuszczam, że lepiej jest zainstalować statyczny kod schematu na stronie HTML, z linkiem do Yandex.Maps, ponieważ skrypt może śmiecić na urządzeniach z wolnym Internetem.
Wynik:

Tryb panoramy można również dodać do swojej witryny Wynik (zawartość można obracać, jeśli złapiesz jej sekcję myszką, poruszaj się po ulicach, klikając strzałki):

Radzę obejrzeć ten film dla inspiracji:

Dodaj mapę do serwisu: dwa obrazy obok siebie (HTML / CSS)

Obok mapy możesz umieścić zdjęcie organizacji. Gdy okno przeglądarki zostanie zmniejszone, obrazy zmniejszą się proporcjonalnie.

Ale myślę, że tak: użytkownik szuka organizacji i najpierw musi wiedzieć, jak się do niej dostać. Dlatego lepiej, jeśli zobaczy mapę odpowiedniej wielkości niż małą mapę i małe zdjęcie budynku w pobliżu. Gdy ekran jest zmniejszony, prawa strona obrazu tła pozostanie tak długo, jak to możliwe.

A tu lewy:

Jeśli chcesz, aby zdjęcie zostało przeniesione do nowej linii, gdy dwa zdjęcia nie pasują do siebie w bieżącej?

I na koniec włożenie karty na zdjęcie. Opis obrazu będzie albo po prawej stronie obrazu z adresem firmy, albo pod nim.
Rzeźba „Ojczyzna wzywa!”

Mapy Yandex są teraz po prostu nieodzowną rzeczą w naszym życiu. Teraz, aby dostać się z jednego punktu do drugiego, nie trzeba pytać wszystkich przechodniów, gdzie jest ta ulica, ani błądzić w nieznanych miejscach. Ponadto program ten pozwala znacznie zaoszczędzić czas, unikając korków, o których powiadamia w czasie rzeczywistym. I to nie wszystko. W najnowszych wersjach użytkownicy programu sami mogą informować się o wypadkach drogowych, problemach na drodze i innych ważnych dla kierowców sprawach. Jak więc zainstalować mapy Yandex?

Instrukcje instalacji zależą od urządzenia, na którym chcesz umieścić tę przydatną aplikację, więc rozważmy najpopularniejsze opcje.

Jak zainstalować mapy Yandex na Androidzie?

Telefony z systemem Android mają ogromną przewagę nad zwykłymi telefonami w tym, że mają własny sklep z aplikacjami Yandex. Dostępne są w nim również mapy i są bezpłatne, to znaczy można je pobierać na dowolne urządzenie nieskończoną ilość razy.

1. Więc otwórz Google Play (lub jeśli masz starą wersję oprogramowania układowego, to Android Market).
2. W oknie, które zostanie otwarte, wybierz pole wyszukiwania i wprowadź tam mapy Yandex.
3. W wynikach wyszukiwania pojawi się kilka programów. Jednym z nich będą same mapy, a drugim nawigator. Możesz zainstalować oba, jeśli myślisz, że będziesz również używać nawigacji samochodowej.
4. Po instalacji każdy z programów znajdziesz w menu

Jak zainstalować mapy Yandex na swoim telefonie?

Aplikacja Yandex. Mapy obsługują ogromną liczbę modeli telefonów, a raczej prawie wszystkie, które obsługują Javę. Spójrzmy na przykład instalacji na bardzo zwykłym telefonie.

Aby zainstalować i obsługiwać sam program, potrzebujesz skonfigurowanego połączenia z Internetem!

1. Otwórz program do przeglądania stron internetowych w telefonie (polecam korzystanie ze standardowego rozwiązania telefonicznego, czyli nie używaj Opery Mini)
2. Wejdź na my.ya.ru/maps i upewnij się, że Twój telefon został poprawnie wykryty. Jest to ważne, ponieważ w przypadku błędu program może nie działać poprawnie lub w ogóle się nie uruchomić.
3. Jeśli wszystko jest w porządku, pobierz program. Jeśli wystąpił błąd w definicji, kliknij przycisk „Inny model” i znajdź swój telefon na liście.
4. Po pobraniu zainstaluj program twierdząco, odpowiadając na wszystkie pytania telefonu.
5. Gotowe! Teraz możesz korzystać z map w telefonie!

Jak zainstalować mapy Yandex w nawigatorze?

Aby upewnić się, że Twój nawigator obsługuje Yandex Maps, musisz dowiedzieć się, na jakim systemie operacyjnym działa. Jeśli jest to Android, powinieneś skorzystać z instrukcji, które napisałem nieco wyżej (instalacja na telefonach z Androidem). Ten proces nie będzie inny, jeśli umieścisz go na telefonie, tablecie lub nawigatorze. Oznacza to, że wystarczy przejść do sklepu Google Play i pobrać aplikację na swój telefon, a następnie ją zainstalować.

Jeśli Twoja przeglądarka korzysta z systemu Windows CE, masz szczęście. Istnieje wersja dla podobnych urządzeń.

1. Pobierz aplikację dla Win CE na swój komputer stąd "yandexmaps-wince.zip".
2. Rozpakuj pobrane archiwum na swoim komputerze i wyślij wszystkie pliki do swojego nawigatora.
3. Użyj menedżera plików, aby znaleźć te pliki i kliknij je, aby zainstalować.
4. Gotowe! Teraz możesz korzystać ze wszystkich funkcji Yandex. Mapy bezpośrednio w nawigatorze.