1
00:00:02,340 --> 00:00:07,350
Więc teraz chcę również wyświetlić tutaj mały podgląd mapy i oczywiście istnieją różne sposoby, aby to

2
00:00:07,350 --> 00:00:11,000
zrobić, a później dodamy również interaktywną mapę do tej aplikacji.

3
00:00:11,010 --> 00:00:12,970
Na razie chcę tylko mieć

4
00:00:12,960 --> 00:00:19,570
obraz statyczny, tak jak migawka mapy, a fajne jest to, że Google ma dla nas interfejs API, który generuje takie migawki.

5
00:00:19,620 --> 00:00:24,810
Możesz google dla statycznego interfejsu API Map Google, aby znaleźć oficjalną dokumentację, w której można dowiedzieć się wszystkiego

6
00:00:24,810 --> 00:00:26,010
o tym, oczywiście,

7
00:00:26,190 --> 00:00:29,340
a na koniec korzystanie z tego interfejsu API jest bardzo proste.

8
00:00:29,400 --> 00:00:35,820
Musisz tylko wysłać żądanie na ten adres URL, a to już daje ci obraz, więc możesz

9
00:00:35,820 --> 00:00:40,650
po prostu użyć tego linku na komponencie obrazu i jesteś dobry.

10
00:00:40,650 --> 00:00:46,740
Jedyną trudną rzeczą jest tutaj klucz API, tam potrzebujesz poświadczeń API i

11
00:00:46,740 --> 00:00:49,300
do tego potrzebujesz klucza API.

12
00:00:49,410 --> 00:00:55,590
Teraz możesz po prostu kliknąć tutaj swój klucz API i wygenerować jeden, a teraz możesz wybrać

13
00:00:55,590 --> 00:00:59,660
projekt, który już masz, lub utworzyć nowy projekt, w

14
00:00:59,670 --> 00:01:05,220
tym celu musisz anulować tutaj i zamiast tego przewinąć nieco w dół do tego

15
00:01:05,250 --> 00:01:10,110
miejsca na początku aktywuj część API tutaj i kliknij tutaj, aby zacząć.

16
00:01:10,110 --> 00:01:15,840
Teraz, gdy to zrobisz, zostaniesz przeniesiony do konsoli platformy Google Maps, gdzie

17
00:01:15,840 --> 00:01:21,930
możesz teraz włączyć różne funkcje Map Google, których chcesz używać, a tutaj interesują mnie

18
00:01:21,930 --> 00:01:29,590
mapy, które później pomogą nam korzystać z tej interaktywnej aplikacji dynamicznej na Android i interesują mnie miejsca.

19
00:01:29,670 --> 00:01:31,420
Te dwie rzeczy powinny zostać

20
00:01:31,470 --> 00:01:36,430
sprawdzone, nie potrzebujemy tras, ponieważ nie budujemy tutaj żadnych funkcji nawigacyjnych, a dzięki temu możemy

21
00:01:36,430 --> 00:01:40,600
kliknąć kontynuuj, wybierz projekt, a teraz albo wybierz istniejący projekt, albo po

22
00:01:40,600 --> 00:01:45,820
prostu utwórz nowy jeden, a ja utworzę tutaj nowy i nadam mu nazwę React Complete Guide,

23
00:01:45,820 --> 00:01:47,560
ale możesz nazwać go,

24
00:01:50,460 --> 00:01:53,370
jak chcesz, kliknij tutaj i poczekaj na wygenerowanie.

25
00:01:53,370 --> 00:01:57,320
Powinno to być stosunkowo szybkie i teraz martwimy się

26
00:01:57,360 --> 00:01:58,680
cenami podczas ładowania.

27
00:01:58,770 --> 00:02:02,970
Zasadniczo możesz używać tego za darmo, ale potrzebujesz konta rozliczeniowego i właśnie

28
00:02:02,970 --> 00:02:04,740
o to mnie tutaj proszą.

29
00:02:04,770 --> 00:02:06,080
Oczywiście potrzebujesz konta

30
00:02:06,150 --> 00:02:09,930
Google, a na tym koncie Google musisz mieć kartę kredytową, aby móc z

31
00:02:09,930 --> 00:02:13,570
niej korzystać, w przeciwnym razie nie możesz tego niestety użyć, tak jest.

32
00:02:13,590 --> 00:02:15,180
Więc potrzebujesz karty kredytowej,

33
00:02:15,180 --> 00:02:19,590
musisz mieć konto rozliczeniowe skonfigurowane na koncie Google, a następnie możesz użyć tego

34
00:02:19,590 --> 00:02:26,100
zalogowanego konta Google do tego projektu, co właśnie tutaj robię. Po włączeniu tej opcji nadal będziesz mógł korzystać

35
00:02:26,160 --> 00:02:28,550
z niej za darmo, otrzymasz

36
00:02:28,550 --> 00:02:33,570
bardzo hojną bezpłatną warstwę i dołączasz link do ceny platformy Google Maps i

37
00:02:33,810 --> 00:02:39,540
tylko jeśli przekroczysz określone limity, dla których nie przekroczymy niewielkie wykorzystanie, które mamy tutaj

38
00:02:39,540 --> 00:02:43,200
w tych filmach, tylko jeśli przekroczysz te limity, zapłacisz.

39
00:02:43,200 --> 00:02:47,520
Teraz nadal pamiętaj, że może istnieć moment, w którym musisz zapłacić, i

40
00:02:47,520 --> 00:02:52,340
że zależy to od tego, ile używasz interfejsu API, a zatem zdecydowanie sprawdź dokumenty cenowe.

41
00:02:52,380 --> 00:02:57,190
Teraz tutaj mam to wszystko włączone i właśnie kończę,

42
00:02:57,300 --> 00:03:03,160
a do końca powinieneś otrzymać klucz API, który oczywiście unieważnię po tych nagraniach.

43
00:03:03,180 --> 00:03:06,440
Więc nie możesz użyć mojego, ale powinieneś wziąć

44
00:03:06,460 --> 00:03:11,610
swój, a teraz jest to klucz API, który musisz wstawić tutaj w tym adresie URL.

45
00:03:11,670 --> 00:03:18,150
Więc teraz po prostu skopiuję cały adres URL tutaj i przeniosę go do naszego kodu i tam,

46
00:03:18,210 --> 00:03:23,790
teraz chcę wygenerować obraz, który wskazuje na ten adres URL, ponieważ, jak wspomniałem, w ten

47
00:03:23,790 --> 00:03:27,900
sposób można uzyskać ten obraz, ten adres URL zwraca obraz.

48
00:03:27,900 --> 00:03:33,390
Teraz zrobię to, że utworzę tutaj nowy komponent, który nadam nazwę MapPreview. js, ponieważ użyję go również

49
00:03:33,390 --> 00:03:39,090
w innym miejscu aplikacji, gdzie później importuję React z React, a

50
00:03:39,180 --> 00:03:44,890
następnie importuję obraz i arkusz stylów z React Native, jak to.

51
00:03:47,620 --> 00:03:55,180
Następnie tutaj utworzę mój element podglądu mapy, który oczywiście przyjmuje rekwizyty, co musi zwrócić trochę jsx później

52
00:03:55,180 --> 00:04:02,310
i skonfigurować tutaj style z Arkuszem stylów. utwórz i oczywiście

53
00:04:04,970 --> 00:04:11,600
również wyeksportuj ten element podglądu mapy.

54
00:04:12,050 --> 00:04:16,430
Teraz tutaj chcę wygenerować ten adres URL, o którym właśnie mówiłem, więc

55
00:04:17,660 --> 00:04:26,870
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

56
00:04:26,900 --> 00:04:32,540
skopiować ten adres URL, który właśnie skopiowałeś z dokumentacji tutaj, upewnij się, że wszystko jest w

57
00:04:32,540 --> 00:04:34,110
jednej linii, ponieważ

58
00:04:34,190 --> 00:04:37,790
domyślnie tak nie jest, więc upewnij się, że wszystko jest

59
00:04:37,790 --> 00:04:40,360
w jednej linii, w przeciwnym razie to

60
00:04:40,370 --> 00:04:42,460
nie zadziała, a teraz jest

61
00:04:42,460 --> 00:04:44,590
oczywiście kilka segmentów, które musisz

62
00:04:44,600 --> 00:04:50,210
wymienić, na przykład tutaj, środek jest równy części. Domyślnie wskazuje to na Most Brookliński i

63
00:04:50,270 --> 00:04:55,100
możesz tutaj wpisać adresy, ale możesz także tutaj wprowadzić pary szerokości i długości geograficznej.

64
00:04:55,100 --> 00:05:01,820
Będę więc dynamicznie dodawał tutaj dwie informacje oddzielone przecinkiem, a pierwszą rzeczą jest

65
00:05:01,820 --> 00:05:04,090
szerokość geograficzna. Tutaj spodziewam się,

66
00:05:04,100 --> 00:05:06,680
że dostanę to na moich rekwizytach,

67
00:05:06,680 --> 00:05:12,100
spodziewam się, że dostanę rekwizyt lokalizacji, i oczywiście może to być dowolna wybrana

68
00:05:12,110 --> 00:05:20,600
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ść

69
00:05:20,660 --> 00:05:21,610
i

70
00:05:21,620 --> 00:05:27,130
długość geograficzna lokalizacji, którą chcę wyświetlić podgląd. Teraz współczynnik powiększenia ustawię na 14, możesz

71
00:05:27,200 --> 00:05:33,110
eksperymentować z różnymi czynnikami, to wpływa zasadniczo na to, jak daleko mapa jest powiększana lub pomniejszana.

72
00:05:33,170 --> 00:05:36,350
Możesz także pobawić się tutaj swoim rozmiarem.

73
00:05:36,360 --> 00:05:42,230
Teraz, ponieważ będę mieć kontener z podglądem mapy, którego zwykle używam przy

74
00:05:42,230 --> 00:05:48,520
wysokości 200, ustawię tutaj wysokość na 200 i dlatego ustawię szerokość na 400 tutaj.

75
00:05:48,740 --> 00:05:55,640
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

76
00:05:55,640 --> 00:06:01,610
pobierasz tutaj bardzo duży obraz, będzie on oczywiście zbyt duży, za dużo danych, aby

77
00:06:01,610 --> 00:06:06,290
pobieranie, ładuje się wolniej i może nie być to potrzebne.

78
00:06:06,350 --> 00:06:12,260
Powinieneś więc dążyć do rozmiaru obrazu mapy, który pasuje do kontenera, w którym chcesz go wyświetlić, nie

79
00:06:12,260 --> 00:06:18,740
musi być dokładnie tego samego rozmiaru, ale z grubsza. Teraz typem mapy jest sposób wyświetlania mapy, możesz użyć

80
00:06:18,740 --> 00:06:23,990
satelity tutaj, ale pozostanę przy standardowej mapie drogowej i teraz możesz także dodawać znaczniki do

81
00:06:23,990 --> 00:06:24,870
tej mapy.

82
00:06:24,950 --> 00:06:27,840
Teraz w tym atrapie znajduje się kilka znaczników,

83
00:06:28,040 --> 00:06:34,700
pozbędę się ich wszystkich, ale jeden, więc mam tu tylko znaczniki, kolor czerwony, etykietę, może to być

84
00:06:34,700 --> 00:06:35,600
pojedynczy

85
00:06:35,630 --> 00:06:37,220
znak, np. ABC a

86
00:06:37,220 --> 00:06:42,890
następnie szerokość i długość geograficzną, w której ten znacznik powinien zostać umieszczony, i oczywiście

87
00:06:42,890 --> 00:06:46,440
to znowu rekwizyty. Lokalizacja. lat, a następnie

88
00:06:46,490 --> 00:06:53,960
tutaj przecinek, a następnie zamień ten numer na rekwizyty. Lokalizacja. lng.

89
00:06:54,470 --> 00:07:01,500
Umieszczenie takiego znacznika jest opcjonalne, ale oczywiście chcę pokazać użytkownikowi, gdzie to jest.

90
00:07:01,740 --> 00:07:09,360
Teraz potrzebuję klucza API, więc skopiuję ten klucz, który został wygenerowany tutaj i zastąpię go tutaj.

91
00:07:09,480 --> 00:07:14,610
Teraz nie mogę wkleić go w ten sposób, ale tak naprawdę chcę zarządzać tym w osobnym

92
00:07:14,610 --> 00:07:18,490
pliku, ponieważ użyję tego klucza API również w innych miejscach aplikacji.

93
00:07:18,570 --> 00:07:24,180
Więc tutaj utworzę nowy plik, który nazwie env. js dla środowiska, aby skonfigurować

94
00:07:24,870 --> 00:07:34,970
niektóre zmienne środowiskowe i tam ustawię obiekt za pomocą mojego klucza Google API i powinna to być ta wartość

95
00:07:34,970 --> 00:07:44,820
tutaj, a następnie mogę go wyeksportować, a zatem oczywiście powinien mieć nazwę, vars jest równe i potem eksportuję

96
00:07:44,820 --> 00:07:45,980
tutaj vars.

97
00:07:46,050 --> 00:07:51,000
Dzięki temu mogę po prostu zaimportować z tego pliku env

98
00:07:51,000 --> 00:08:02,300
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

99
00:08:02,300 --> 00:08:03,110
tutaj.

100
00:08:03,110 --> 00:08:07,670
Mamy teraz jedno miejsce, w którym możemy zmienić ten klucz i gdzie możemy go również zaimportować

101
00:08:07,670 --> 00:08:09,550
ze wszystkich różnych miejsc naszej aplikacji.

102
00:08:09,590 --> 00:08:14,900
Więc tutaj dynamicznie wprowadzam env. googleapikey.

103
00:08:15,010 --> 00:08:17,900
Dzięki temu mam skonfigurowany URL podglądu

104
00:08:18,100 --> 00:08:23,550
obrazu, teraz w tym komponencie oczywiście musimy zwrócić podgląd obrazu i ogólnie jest

105
00:08:23,560 --> 00:08:30,250
to widok, który mam tutaj w selektorze lokalizacji. Więc wezmę go stamtąd i dodam w podglądzie

106
00:08:31,500 --> 00:08:35,130
mapy, tak jak tutaj, chociaż zawartość rezerwowa tam, tak

107
00:08:35,130 --> 00:08:41,790
naprawdę chcę przekazać to z zewnątrz, więc wycinam to ponownie i przenoszę z powrotem do wybór

108
00:08:41,790 --> 00:08:42,420
lokalizacji.

109
00:08:42,420 --> 00:08:44,370
Jednak nie tak, ale zamiast

110
00:08:45,180 --> 00:08:53,440
tego tutaj, zaimportuj ten nowo dodany element podglądu mapy, więc zaimportuj go z. / MapPreview, więc ten nowy składnik, nad

111
00:08:53,480 --> 00:08:55,910
którym obecnie pracujemy, dodaj

112
00:08:56,030 --> 00:08:57,960
go tutaj, podgląd

113
00:08:58,220 --> 00:09:05,240
mapy, a następnie sprawdź to pobieranie i wskaźnik oraz tekst zastępczy tutaj.

114
00:09:05,270 --> 00:09:12,250
Dlatego w podglądzie mapy będę miał tutaj tylko dzieci-rekwizyty, aby wyświetlały to, co zostało dodane między tagiem

115
00:09:12,250 --> 00:09:15,480
otwierającym i zamykającym, ale to tylko zawartość zastępcza,

116
00:09:15,480 --> 00:09:21,760
oczywiście dbam o wyświetlanie tutaj prawdziwego podglądu. Teraz musimy upewnić się, że adres URL podglądu

117
00:09:21,820 --> 00:09:28,190
obrazu faktycznie może być pusty, na wypadek, gdyby nie wybrano jeszcze miejsca, dlatego utworzę zmienny adres

118
00:09:28,220 --> 00:09:30,610
URL podglądu obrazu i po

119
00:09:30,610 --> 00:09:37,990
prostu przypiszę tutaj wartość i chcę przypisać wartość jeśli rekwizyty. Lokalizacja jest ustawiona, ponieważ nie można jej również ustawić w

120
00:09:37,990 --> 00:09:44,980
przypadku, gdy nie wybraliśmy jeszcze lokalizacji, a teraz URL podglądu obrazu jest albo pusty, albo jest to ten adres URL,

121
00:09:44,980 --> 00:09:51,400
w zależności od tego, czy mamy lokalizację przekazaną na rekwizyt lokalizacji i możemy teraz tego użyć tam, żeby

122
00:09:51,400 --> 00:09:52,220
coś wyprowadzić,

123
00:09:52,220 --> 00:09:56,020
a przy okazji, ponieważ używam tutaj widoku, oczywiście powinniśmy również upewnić

124
00:09:56,020 --> 00:09:57,640
się, że importujemy widok.

125
00:09:57,870 --> 00:09:59,290
Jak teraz korzystać z tego adresu URL?

126
00:09:59,310 --> 00:10:02,160
Cóż, jeśli go mamy, chcę go użyć do

127
00:10:02,160 --> 00:10:06,170
wyprowadzenia obrazu, w przeciwnym razie pokażę tę rekwizytom zawartość zastępczą dla dzieci.

128
00:10:06,240 --> 00:10:08,580
Więc tutaj możemy sprawdzić

129
00:10:08,580 --> 00:10:10,140
rekwizyty. lokalizacja, jeśli

130
00:10:10,140 --> 00:10:12,230
to ustawione wiem, że będę

131
00:10:12,240 --> 00:10:18,600
mieć również adres URL obrazu, możemy oczywiście również sprawdzić istnienie adresu URL obrazu, a jeśli jest ustawiony,

132
00:10:18,600 --> 00:10:19,260
wyślę

133
00:10:19,260 --> 00:10:25,200
obraz tutaj, jeśli nie jest ustawiony, wyjściowe rekwizyty takie dzieci, więc wyprowadzę moją rezerwową treść.

134
00:10:26,110 --> 00:10:29,960
Teraz obraz otrzyma trochę stylizacji, obraz mapy

135
00:10:30,040 --> 00:10:39,650
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,

136
00:10:39,650 --> 00:10:42,010
obraz sieci, prawda?

137
00:10:43,000 --> 00:10:46,330
Teraz po prostu przenieś style z

138
00:10:46,390 --> 00:10:54,520
selektora lokalizacji, mogę zrobić podgląd mapy, ale chcę tylko przenieść uzasadnioną część zawartości i faktycznie przekazać resztę ręcznie tutaj

139
00:10:54,520 --> 00:11:01,390
i scalić, więc nadal będę przekazywać style . MapPreview z poziomu mojego selektora lokalizacji oraz w podglądzie mapy, chcę

140
00:11:01,390 --> 00:11:07,300
teraz połączyć to z moimi stylami, które tu konfiguruję. Więc tutaj owinę to w obiekt, w którym

141
00:11:07,300 --> 00:11:13,270
wyciągnę wszystkie style ustawione w podglądzie mapy tutaj i scalę we wszystkich stylach ustawionych na

142
00:11:13,270 --> 00:11:19,240
tym rekwizytach stylów, abyśmy mogli ustawić style również z zewnątrz i połączyć je z nasze

143
00:11:19,240 --> 00:11:26,980
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

144
00:11:26,980 --> 00:11:29,050
i dla samego obrazu, więc

145
00:11:29,200 --> 00:11:30,850
dla obrazu mapy,

146
00:11:30,910 --> 00:11:37,020
chcę to ustawić całą dostępną szerokość i wysokość, jaką może uzyskać, i musimy to ustawić,

147
00:11:37,040 --> 00:11:41,410
ponieważ jest to obraz sieci. Jak się dowiedziałeś, dla tych musisz ustawić

148
00:11:41,410 --> 00:11:43,040
szerokość i wysokość komponentu obrazu.

149
00:11:44,710 --> 00:11:51,040
Teraz mamy komponent podglądu mapy, który albo wyświetla ten obraz mapy, albo naszą

150
00:11:51,040 --> 00:11:53,690
rezerwową zawartość, która jest przekazywana

151
00:11:53,920 --> 00:11:57,640
z zewnątrz i robi to, sprawdzając rekwizyt lokalizacji.

152
00:11:57,640 --> 00:12:02,950
Więc w miejscu, w którym używamy komponentu podglądu mapy, który jest oczywiście

153
00:12:02,950 --> 00:12:07,330
selektorem lokalizacji, musimy przekazać ten rekwizyt lokalizacji i rekwizyt

154
00:12:07,330 --> 00:12:15,190
lokalizacji, jeśli sprawdzimy podgląd mapy, w końcu musi to być obiekt o szerokości geograficznej i długość geograficzna lub

155
00:12:15,190 --> 00:12:19,840
klawisz łaciński i lng. Dlatego z powrotem w

156
00:12:19,910 --> 00:12:25,610
selektorze lokalizacji chcę przekazać tutaj taki rekwizyt i rzeczywiście właśnie tutaj zarządzamy

157
00:12:25,610 --> 00:12:32,870
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

158
00:12:33,050 --> 00:12:36,300
jest zdefiniowany i ten przypadek jest obsługiwany również w

159
00:12:36,410 --> 00:12:41,060
elemencie podglądu mapy, jeśli jest niezdefiniowany, po prostu wyświetlamy zawartość rezerwową przekazywaną z zewnątrz.

160
00:12:41,060 --> 00:12:46,880
Tak więc do lokalizacji możemy po prostu przejść w wybraną lokalizację i dzięki temu powinniśmy mieć konfigurację,

161
00:12:46,880 --> 00:12:50,150
w której faktycznie możemy zobaczyć podgląd tego miejsca.

162
00:12:50,630 --> 00:12:52,490
Więc teraz widzimy cofniętą zawartość,

163
00:12:52,520 --> 00:12:59,120
ale jeśli teraz kliknę przycisk Pobierz lokalizację użytkownika, zobaczymy pokrętło, a następnie zobaczymy prawdziwą migawkę miejsca, które

164
00:12:59,150 --> 00:13:00,010
wybraliśmy.

165
00:13:00,080 --> 00:13:02,180
Jak już wspomniałem, nie jest to miejsce, w którym teraz siedzę,

166
00:13:02,180 --> 00:13:05,930
to tylko fikcyjne miejsce, które daje nam emulator. To samo na Androidzie,

167
00:13:05,930 --> 00:13:08,370
jeśli wezmę tutaj lokalizację, teraz jest

168
00:13:08,370 --> 00:13:12,140
to faktycznie główna siedziba Google, którą tam domyślnie wybrałem.

169
00:13:12,880 --> 00:13:17,370
Więc to działa, teraz jako kolejny krok, chcę się upewnić,

170
00:13:17,410 --> 00:13:22,570
że możemy również wybrać to miejsce na mapie zamiast nas tylko zlokalizować.