Więc teraz chcę również wyświetlić tutaj mały podgląd mapy i oczywiście istnieją różne sposoby, aby to
zrobić, a później dodamy również interaktywną mapę do tej aplikacji.
Na razie chcę tylko mieć
obraz statyczny, tak jak migawka mapy, a fajne jest to, że Google ma dla nas interfejs API, który generuje takie migawki.
Możesz google dla statycznego interfejsu API Map Google, aby znaleźć oficjalną dokumentację, w której można dowiedzieć się wszystkiego
o tym, oczywiście,
a na koniec korzystanie z tego interfejsu API jest bardzo proste.
Musisz tylko wysłać żądanie na ten adres URL, a to już daje ci obraz, więc możesz
po prostu użyć tego linku na komponencie obrazu i jesteś dobry.
Jedyną trudną rzeczą jest tutaj klucz API, tam potrzebujesz poświadczeń API i
do tego potrzebujesz klucza API.
Teraz możesz po prostu kliknąć tutaj swój klucz API i wygenerować jeden, a teraz możesz wybrać
projekt, który już masz, lub utworzyć nowy projekt, w
tym celu musisz anulować tutaj i zamiast tego przewinąć nieco w dół do tego
miejsca na początku aktywuj część API tutaj i kliknij tutaj, aby zacząć.
Teraz, gdy to zrobisz, zostaniesz przeniesiony do konsoli platformy Google Maps, gdzie
możesz teraz włączyć różne funkcje Map Google, których chcesz używać, a tutaj interesują mnie
mapy, które później pomogą nam korzystać z tej interaktywnej aplikacji dynamicznej na Android i interesują mnie miejsca.
Te dwie rzeczy powinny zostać
sprawdzone, nie potrzebujemy tras, ponieważ nie budujemy tutaj żadnych funkcji nawigacyjnych, a dzięki temu możemy
kliknąć kontynuuj, wybierz projekt, a teraz albo wybierz istniejący projekt, albo po
prostu utwórz nowy jeden, a ja utworzę tutaj nowy i nadam mu nazwę React Complete Guide,
ale możesz nazwać go,
jak chcesz, kliknij tutaj i poczekaj na wygenerowanie.
Powinno to być stosunkowo szybkie i teraz martwimy się
cenami podczas ładowania.
Zasadniczo możesz używać tego za darmo, ale potrzebujesz konta rozliczeniowego i właśnie
o to mnie tutaj proszą.
Oczywiście potrzebujesz konta
Google, a na tym koncie Google musisz mieć kartę kredytową, aby móc z
niej korzystać, w przeciwnym razie nie możesz tego niestety użyć, tak jest.
Więc potrzebujesz karty kredytowej,
musisz mieć konto rozliczeniowe skonfigurowane na koncie Google, a następnie możesz użyć tego
zalogowanego konta Google do tego projektu, co właśnie tutaj robię. Po włączeniu tej opcji nadal będziesz mógł korzystać
z niej za darmo, otrzymasz
bardzo hojną bezpłatną warstwę i dołączasz link do ceny platformy Google Maps i
tylko jeśli przekroczysz określone limity, dla których nie przekroczymy niewielkie wykorzystanie, które mamy tutaj
w tych filmach, tylko jeśli przekroczysz te limity, zapłacisz.
Teraz nadal pamiętaj, że może istnieć moment, w którym musisz zapłacić, i
że zależy to od tego, ile używasz interfejsu API, a zatem zdecydowanie sprawdź dokumenty cenowe.
Teraz tutaj mam to wszystko włączone i właśnie kończę,
a do końca powinieneś otrzymać klucz API, który oczywiście unieważnię po tych nagraniach.
Więc nie możesz użyć mojego, ale powinieneś wziąć
swój, a teraz jest to klucz API, który musisz wstawić tutaj w tym adresie URL.
Więc teraz po prostu skopiuję cały adres URL tutaj i przeniosę go do naszego kodu i tam,
teraz chcę wygenerować obraz, który wskazuje na ten adres URL, ponieważ, jak wspomniałem, w ten
sposób można uzyskać ten obraz, ten adres URL zwraca obraz.
Teraz zrobię to, że utworzę tutaj nowy komponent, który nadam nazwę MapPreview. js, ponieważ użyję go również
w innym miejscu aplikacji, gdzie później importuję React z React, a
następnie importuję obraz i arkusz stylów z React Native, jak to.
Następnie tutaj utworzę mój element podglądu mapy, który oczywiście przyjmuje rekwizyty, co musi zwrócić trochę jsx później
i skonfigurować tutaj style z Arkuszem stylów. utwórz i oczywiście
również wyeksportuj ten element podglądu mapy.
Teraz tutaj chcę wygenerować ten adres URL, o którym właśnie mówiłem, więc
tutaj powinien zostać wygenerowany URL podglądu obrazu i można to zrobić, używając tutaj tylnych znaczników, aby móc łatwo dodać dynamiczną treść do tekstu, a następnie
skopiować ten adres URL, który właśnie skopiowałeś z dokumentacji tutaj, upewnij się, że wszystko jest w
jednej linii, ponieważ
domyślnie tak nie jest, więc upewnij się, że wszystko jest
w jednej linii, w przeciwnym razie to
nie zadziała, a teraz jest
oczywiście kilka segmentów, które musisz
wymienić, na przykład tutaj, środek jest równy części. Domyślnie wskazuje to na Most Brookliński i
możesz tutaj wpisać adresy, ale możesz także tutaj wprowadzić pary szerokości i długości geograficznej.
Będę więc dynamicznie dodawał tutaj dwie informacje oddzielone przecinkiem, a pierwszą rzeczą jest
szerokość geograficzna. Tutaj spodziewam się,
że dostanę to na moich rekwizytach,
spodziewam się, że dostanę rekwizyt lokalizacji, i oczywiście może to być dowolna wybrana
nazwa rekwizytu, która następnie powinna mieć klucz Lat, a tutaj, chcę mieć długi klucz, klucz Lng również, więc będzie to szerokość
i
długość geograficzna lokalizacji, którą chcę wyświetlić podgląd. Teraz współczynnik powiększenia ustawię na 14, możesz
eksperymentować z różnymi czynnikami, to wpływa zasadniczo na to, jak daleko mapa jest powiększana lub pomniejszana.
Możesz także pobawić się tutaj swoim rozmiarem.
Teraz, ponieważ będę mieć kontener z podglądem mapy, którego zwykle używam przy
wysokości 200, ustawię tutaj wysokość na 200 i dlatego ustawię szerokość na 400 tutaj.
Oczywiście możesz tutaj użyć większego rozmiaru niż użyjesz kontenera do późniejszego wyświetlenia obrazu, pamiętaj jednak, że jeśli
pobierasz tutaj bardzo duży obraz, będzie on oczywiście zbyt duży, za dużo danych, aby
pobieranie, ładuje się wolniej i może nie być to potrzebne.
Powinieneś więc dążyć do rozmiaru obrazu mapy, który pasuje do kontenera, w którym chcesz go wyświetlić, nie
musi być dokładnie tego samego rozmiaru, ale z grubsza. Teraz typem mapy jest sposób wyświetlania mapy, możesz użyć
satelity tutaj, ale pozostanę przy standardowej mapie drogowej i teraz możesz także dodawać znaczniki do
tej mapy.
Teraz w tym atrapie znajduje się kilka znaczników,
pozbędę się ich wszystkich, ale jeden, więc mam tu tylko znaczniki, kolor czerwony, etykietę, może to być
pojedynczy
znak, np. ABC a
następnie szerokość i długość geograficzną, w której ten znacznik powinien zostać umieszczony, i oczywiście
to znowu rekwizyty. Lokalizacja. lat, a następnie
tutaj przecinek, a następnie zamień ten numer na rekwizyty. Lokalizacja. lng.
Umieszczenie takiego znacznika jest opcjonalne, ale oczywiście chcę pokazać użytkownikowi, gdzie to jest.
Teraz potrzebuję klucza API, więc skopiuję ten klucz, który został wygenerowany tutaj i zastąpię go tutaj.
Teraz nie mogę wkleić go w ten sposób, ale tak naprawdę chcę zarządzać tym w osobnym
pliku, ponieważ użyję tego klucza API również w innych miejscach aplikacji.
Więc tutaj utworzę nowy plik, który nazwie env. js dla środowiska, aby skonfigurować
niektóre zmienne środowiskowe i tam ustawię obiekt za pomocą mojego klucza Google API i powinna to być ta wartość
tutaj, a następnie mogę go wyeksportować, a zatem oczywiście powinien mieć nazwę, vars jest równe i potem eksportuję
tutaj vars.
Dzięki temu mogę po prostu zaimportować z tego pliku env
i właśnie to tutaj zrobię, zaimportować env z pliku env tutaj i to oznacza zmienne środowiskowe, jak powiedziałem, a teraz dynamicznie wstrzykuję to
tutaj.
Mamy teraz jedno miejsce, w którym możemy zmienić ten klucz i gdzie możemy go również zaimportować
ze wszystkich różnych miejsc naszej aplikacji.
Więc tutaj dynamicznie wprowadzam env. googleapikey.
Dzięki temu mam skonfigurowany URL podglądu
obrazu, teraz w tym komponencie oczywiście musimy zwrócić podgląd obrazu i ogólnie jest
to widok, który mam tutaj w selektorze lokalizacji. Więc wezmę go stamtąd i dodam w podglądzie
mapy, tak jak tutaj, chociaż zawartość rezerwowa tam, tak
naprawdę chcę przekazać to z zewnątrz, więc wycinam to ponownie i przenoszę z powrotem do wybór
lokalizacji.
Jednak nie tak, ale zamiast
tego tutaj, zaimportuj ten nowo dodany element podglądu mapy, więc zaimportuj go z. / MapPreview, więc ten nowy składnik, nad
którym obecnie pracujemy, dodaj
go tutaj, podgląd
mapy, a następnie sprawdź to pobieranie i wskaźnik oraz tekst zastępczy tutaj.
Dlatego w podglądzie mapy będę miał tutaj tylko dzieci-rekwizyty, aby wyświetlały to, co zostało dodane między tagiem
otwierającym i zamykającym, ale to tylko zawartość zastępcza,
oczywiście dbam o wyświetlanie tutaj prawdziwego podglądu. Teraz musimy upewnić się, że adres URL podglądu
obrazu faktycznie może być pusty, na wypadek, gdyby nie wybrano jeszcze miejsca, dlatego utworzę zmienny adres
URL podglądu obrazu i po
prostu przypiszę tutaj wartość i chcę przypisać wartość jeśli rekwizyty. Lokalizacja jest ustawiona, ponieważ nie można jej również ustawić w
przypadku, gdy nie wybraliśmy jeszcze lokalizacji, a teraz URL podglądu obrazu jest albo pusty, albo jest to ten adres URL,
w zależności od tego, czy mamy lokalizację przekazaną na rekwizyt lokalizacji i możemy teraz tego użyć tam, żeby
coś wyprowadzić,
a przy okazji, ponieważ używam tutaj widoku, oczywiście powinniśmy również upewnić
się, że importujemy widok.
Jak teraz korzystać z tego adresu URL?
Cóż, jeśli go mamy, chcę go użyć do
wyprowadzenia obrazu, w przeciwnym razie pokażę tę rekwizytom zawartość zastępczą dla dzieci.
Więc tutaj możemy sprawdzić
rekwizyty. lokalizacja, jeśli
to ustawione wiem, że będę
mieć również adres URL obrazu, możemy oczywiście również sprawdzić istnienie adresu URL obrazu, a jeśli jest ustawiony,
wyślę
obraz tutaj, jeśli nie jest ustawiony, wyjściowe rekwizyty takie dzieci, więc wyprowadzę moją rezerwową treść.
Teraz obraz otrzyma trochę stylizacji, obraz mapy
i źródło, a źródło tutaj pobiera identyfikator URI wskazujący URL podglądu obrazu, ponieważ będzie to sieciowy adres URL,
obraz sieci, prawda?
Teraz po prostu przenieś style z
selektora lokalizacji, mogę zrobić podgląd mapy, ale chcę tylko przenieść uzasadnioną część zawartości i faktycznie przekazać resztę ręcznie tutaj
i scalić, więc nadal będę przekazywać style . MapPreview z poziomu mojego selektora lokalizacji oraz w podglądzie mapy, chcę
teraz połączyć to z moimi stylami, które tu konfiguruję. Więc tutaj owinę to w obiekt, w którym
wyciągnę wszystkie style ustawione w podglądzie mapy tutaj i scalę we wszystkich stylach ustawionych na
tym rekwizytach stylów, abyśmy mogli ustawić style również z zewnątrz i połączyć je z nasze
style wewnętrzne, a teraz style wewnętrzne na podglądzie mapy, jak już powiedziałem, będę uzasadniać zawartość i wyrównywać elementy tutaj
i dla samego obrazu, więc
dla obrazu mapy,
chcę to ustawić całą dostępną szerokość i wysokość, jaką może uzyskać, i musimy to ustawić,
ponieważ jest to obraz sieci. Jak się dowiedziałeś, dla tych musisz ustawić
szerokość i wysokość komponentu obrazu.
Teraz mamy komponent podglądu mapy, który albo wyświetla ten obraz mapy, albo naszą
rezerwową zawartość, która jest przekazywana
z zewnątrz i robi to, sprawdzając rekwizyt lokalizacji.
Więc w miejscu, w którym używamy komponentu podglądu mapy, który jest oczywiście
selektorem lokalizacji, musimy przekazać ten rekwizyt lokalizacji i rekwizyt
lokalizacji, jeśli sprawdzimy podgląd mapy, w końcu musi to być obiekt o szerokości geograficznej i długość geograficzna lub
klawisz łaciński i lng. Dlatego z powrotem w
selektorze lokalizacji chcę przekazać tutaj taki rekwizyt i rzeczywiście właśnie tutaj zarządzamy
lokalizacją wyboru, co oczywiście nie jest zbiegiem okoliczności. Jest to obiekt o szerokości i długości geograficznej lub początkowo nie
jest zdefiniowany i ten przypadek jest obsługiwany również w
elemencie podglądu mapy, jeśli jest niezdefiniowany, po prostu wyświetlamy zawartość rezerwową przekazywaną z zewnątrz.
Tak więc do lokalizacji możemy po prostu przejść w wybraną lokalizację i dzięki temu powinniśmy mieć konfigurację,
w której faktycznie możemy zobaczyć podgląd tego miejsca.
Więc teraz widzimy cofniętą zawartość,
ale jeśli teraz kliknę przycisk Pobierz lokalizację użytkownika, zobaczymy pokrętło, a następnie zobaczymy prawdziwą migawkę miejsca, które
wybraliśmy.
Jak już wspomniałem, nie jest to miejsce, w którym teraz siedzę,
to tylko fikcyjne miejsce, które daje nam emulator. To samo na Androidzie,
jeśli wezmę tutaj lokalizację, teraz jest
to faktycznie główna siedziba Google, którą tam domyślnie wybrałem.
Więc to działa, teraz jako kolejny krok, chcę się upewnić,
że możemy również wybrać to miejsce na mapie zamiast nas tylko zlokalizować.