1
00:00:02,100 --> 00:00:09,600
Untuk menampilkan ini di peta, kita memiliki komponen layar peta ini yang saat ini hanya memiliki beberapa konten dummy dan

2
00:00:09,600 --> 00:00:15,800
sekarang kita harus dapat membuat peta interaktif dan untuk ini, pameran lagi telah membuat kita tercakup.

3
00:00:15,870 --> 00:00:17,880
Di sana, Anda menemukan

4
00:00:18,970 --> 00:00:20,810
paket tampilan peta.

5
00:00:20,850 --> 00:00:25,840
Sekarang ini di balik layar menggunakan paket bernama React Native maps yang juga dapat Anda gunakan di aplikasi

6
00:00:25,840 --> 00:00:30,220
non-expo, dengan cara banyak dari paket ini dapat digunakan dalam aplikasi non-expo dan itu adalah sesuatu

7
00:00:30,220 --> 00:00:33,950
yang akan saya kembalikan ke dalam membangun aplikasi tanpa modul expo tetapi untuk

8
00:00:34,060 --> 00:00:38,480
saat ini kita dapat dengan mudah menginstal ini dengan menjalankan perintah ini dan ini akan menginstal

9
00:00:38,500 --> 00:00:40,630
paket React Native maps dan kemudian kita

10
00:00:40,640 --> 00:00:43,820
dapat menggunakannya seperti yang kita lihat di sini dalam contoh ini.

11
00:00:43,900 --> 00:00:49,660
Ngomong-ngomong, lihat juga dokumentasi resmi di tautan ini untuk melihat lebih banyak contoh penggunaan di sana karena di sana,

12
00:00:49,660 --> 00:00:52,660
Anda dapat mempelajari semua tentang cara menggunakan paket ini,

13
00:00:52,660 --> 00:00:56,300
beberapa contoh juga ditunjukkan di sini dalam modul ini tentu saja.

14
00:00:56,410 --> 00:01:01,810
Jadi mari kita jalankan expo install react-native-maps untuk menginstal paket ini di sini dan ini

15
00:01:01,810 --> 00:01:06,160
akan memungkinkan kita untuk menggunakan berbagai komponen yang membuat peta interaktif.

16
00:01:06,160 --> 00:01:12,860
Jadi mari kita tunggu sampai selesai dan dengan selesai, di komponen layar peta, kita bisa mulai menggunakan peta

17
00:01:12,860 --> 00:01:13,300
itu.

18
00:01:15,730 --> 00:01:26,160
Sekarang di sana, untuk menggunakan peta, kita dapat mengimpor tampilan peta dari React Native map, jadi dari paket ini kita baru saja menginstal

19
00:01:26,160 --> 00:01:31,150
dan itu akan memungkinkan kita untuk membuat peta di layar.

20
00:01:31,200 --> 00:01:32,730
Sekarang bagaimana cara kerjanya?

21
00:01:32,730 --> 00:01:38,880
Baiklah mari kita pergi ke sini ke layar peta kita dan alih-alih mengembalikan tampilan ini ke sini, saya akan

22
00:01:39,630 --> 00:01:41,340
mengembalikan tampilan peta seperti itu.

23
00:01:41,370 --> 00:01:43,470
Sekarang tampilan peta bisa menjadi tag yang menutup sendiri untuk

24
00:01:43,470 --> 00:01:47,910
saat ini, kita nanti dapat juga menambahkan beberapa penanda di sana tetapi untuk sekarang mari kita render seperti ini dan

25
00:01:48,180 --> 00:01:51,530
sekarang Anda perlu mengkonfigurasi tampilan peta ini. Untuk lebih tepatnya,

26
00:01:51,540 --> 00:01:58,310
diperlukan alat peraga wilayah yang memberi tahu di mana ia harus difokuskan saat memuat, sehingga

27
00:01:58,440 --> 00:02:03,990
memetakan bagian atau bagian dunia mana yang harus menjadi fokusnya saat memuat.

28
00:02:03,990 --> 00:02:12,770
Jadi kita perlu membuat daerah seperti ini di sini dan saya akan menyimpan bahwa dalam wilayah peta

29
00:02:12,770 --> 00:02:20,810
bernama konstan dan wilayah sebenarnya adalah objek dengan empat properti dan Anda harus menamainya seperti ini

30
00:02:20,840 --> 00:02:24,470
- lintang dan bukan lat tetapi

31
00:02:27,360 --> 00:02:32,680
benar-benar lintang ditulis, garis bujur, garis lintang dan garis bujur.

32
00:02:32,830 --> 00:02:41,430
Delta pada dasarnya mengatur faktor zoom karena ini menggambarkan seberapa banyak ruang yang dapat Anda lihat di sekitar

33
00:02:41,490 --> 00:02:45,450
pusat yang Anda gambarkan dengan dua titik ini.

34
00:02:45,480 --> 00:02:48,690
Jadi itu menggambarkan suatu titik, bersama dengan dua

35
00:02:48,690 --> 00:02:51,030
delta, itu menggambarkan suatu permukaan.

36
00:02:51,080 --> 00:02:54,890
Jadi sekarang di sini, kita bisa mulai dengan beberapa nilai

37
00:02:54,890 --> 00:02:58,820
dummy sebelum kemudian nanti juga memastikan bahwa kita dapat mengisi ini.

38
00:02:58,820 --> 00:03:03,980
Jadi di sini, saya akan mengatur ini ke nilai dummy 37. 78 dan -122. 43 yang

39
00:03:03,980 --> 00:03:11,900
berada di Bay Area di sekitar markas Google dan di sini, latitudeDelta

40
00:03:11,900 --> 00:03:18,080
akan mengambil 0. 0922 dan kemudian 0. 0421, saya menemukan bahwa

41
00:03:18,080 --> 00:03:21,030
ini berfungsi dengan baik sebagai daerah.

42
00:03:21,080 --> 00:03:27,120
Tentu saja Anda dapat bereksperimen dengan angka-angka ini tetapi pada akhirnya, berikan wilayah peta ini di sini.

43
00:03:27,200 --> 00:03:30,020
Sekarang ini harus membuat peta di layar, sekarang kita

44
00:03:30,110 --> 00:03:32,320
hanya perlu dapat mencapainya dan untuk

45
00:03:32,330 --> 00:03:37,000
itu izinkan saya kembali ke pemetik lokasi dan saya ingin menjangkau dengan dua cara yang berbeda

46
00:03:37,010 --> 00:03:42,380
- satu dengan bantuan tombol yang belum saya tambahkan. Selain tombol dapatkan lokasi pengguna, saya ingin memiliki

47
00:03:42,390 --> 00:03:48,730
tombol kedua yang harus duduk di sebelah yang pertama, jadi saya akan menambahkan tampilan untuk membungkus keduanya dan

48
00:03:48,730 --> 00:03:53,830
kemudian memindahkan tombol ini di sini dan memiliki tombol kedua di sana dan tombol ini

49
00:03:53,830 --> 00:04:01,400
secara umum akan dikonfigurasikan dengan cara yang sama tetapi saya akan mengatakan memilih pada peta dan tentu saja, saya akan memicu metode

50
00:04:01,400 --> 00:04:09,740
yang berbeda, fungsi yang berbeda, di sini saya ingin memicu fungsi yang merupakan pick pada penangan peta dan karena itu saya akan menggunakan ini

51
00:04:09,740 --> 00:04:10,870
di sini

52
00:04:10,940 --> 00:04:16,220
dan itu salah satu cara memilih ini. Cara lain untuk memilih ini atau

53
00:04:16,220 --> 00:04:22,900
pergi ke peta adalah dengan mengklik pratinjau peta. Sekarang sebelum saya menerapkan ini, izinkan saya dengan cepat gaya tampilan ini yang memegang dua tombol.

54
00:04:22,900 --> 00:04:30,460
Saya akan memberikan pengenal gaya tindakan dan kemudian di sana, tindakan dapat dikonfigurasi dengan cara yang

55
00:04:30,460 --> 00:04:31,620
relatif mudah.

56
00:04:32,930 --> 00:04:38,720
Saya ingin memiliki item yang duduk bersebelahan, jadi arah fleksibel akan menjadi baris bukan kolom. Membenarkan konten dapat menjadi ruang

57
00:04:38,720 --> 00:04:45,580
sekitar untuk mendistribusikan ruang kosong yang tersedia di kedua tombol, saya akan mengambil lebar

58
00:04:45,620 --> 00:04:49,400
100% untuk baris ini dan hanya itu.

59
00:04:49,400 --> 00:04:51,170
Sekarang dengan itu, saya memiliki tombol

60
00:04:51,170 --> 00:04:56,510
saya di sini, sekarang kita perlu memastikan bahwa kita juga dapat mengetuk pratinjau peta dan untuk itu, izinkan

61
00:04:56,510 --> 00:05:03,090
saya pergi ke pratinjau peta dan benar-benar membungkus ini, bukan dalam tampilan tetapi dalam komponen yang dapat disentuh dan di sini Saya hanya

62
00:05:03,110 --> 00:05:07,700
akan menggunakan opacity terjamah, tentu saja Anda juga bisa pergi untuk komponen terjamah berbeda berdasarkan

63
00:05:07,700 --> 00:05:08,260
platform

64
00:05:08,270 --> 00:05:14,000
yang Anda jalankan, saya ingin menjaga ini relatif mudah, jadi saya hanya akan mengganti tampilan ini di sini dengan

65
00:05:14,450 --> 00:05:15,430
opacity terjamah, punya

66
00:05:15,440 --> 00:05:20,750
gaya saya di sini, itu bagus tapi juga tentu saja memiliki penangan onPress dan di sana, saya ingin

67
00:05:20,750 --> 00:05:23,950
memicu fungsi yang saya harapkan dapatkan dari luar melalui alat peraga.

68
00:05:24,020 --> 00:05:28,210
Saya hanya akan memanggil onPress ini juga, tetapi Anda bisa memberikan properti ini nama yang Anda inginkan.

69
00:05:28,250 --> 00:05:32,030
Ini sekarang memungkinkan kita untuk menambahkan prop onPress pada pratinjau peta,

70
00:05:32,030 --> 00:05:38,030
jadi di sini di pemilih lokasi, saya dapat mendengarkan onPress pada pratinjau peta dan tentu saja, saya ingin

71
00:05:38,030 --> 00:05:42,050
memicu fungsi yang sama seperti ketika saya mengklik tombol ke bawah sana.

72
00:05:42,140 --> 00:05:44,420
Saya ingin memicu pick pada handler peta,

73
00:05:44,660 --> 00:05:46,490
jadi itulah yang saya lakukan.

74
00:05:46,520 --> 00:05:49,790
Sekarang pick on map handler harus langsung pergi ke layar peta,

75
00:05:49,790 --> 00:05:56,700
jadi di sana kita dapat mengatakan props. navigasi. navigasi peta dan hanya itu untuk yang kedua.

76
00:05:56,720 --> 00:06:01,760
Jadi jika sekarang kita menyimpan ini, kita harus dapat mencapai peta interaktif layar penuh ini di mana kita belum

77
00:06:01,760 --> 00:06:04,140
dapat memilih tempat, tetapi setidaknya kita dapat melihatnya.

78
00:06:04,160 --> 00:06:09,500
Jadi sekarang jika saya klik pada plus di sini dan kemudian memilih pada peta,

79
00:06:09,600 --> 00:06:15,930
saya mendapatkan kesalahan, mengapa demikian? Nah itu sama sekali tidak terkait dengan modul asli. Anda mungkin ingat bahwa alat navigasi

80
00:06:15,930 --> 00:06:20,700
hanya tersedia pada komponen yang secara langsung dimuat sebagai layar yang tentunya tidak dipilih oleh

81
00:06:20,700 --> 00:06:22,140
pemilih lokasi. Sekarang ada

82
00:06:22,140 --> 00:06:23,750
berbagai solusi, akan ada komponen

83
00:06:23,760 --> 00:06:26,070
urutan yang lebih tinggi yang dapat kita

84
00:06:26,080 --> 00:06:29,910
gunakan, kita juga dapat menginstal paket Navigasi React spesifik tetapi di sini saya

85
00:06:30,360 --> 00:06:35,430
akan mengambil pendekatan sederhana dan hanya memastikan bahwa saya memiliki alat navigasi pada pemetik lokasi oleh pergi

86
00:06:35,760 --> 00:06:39,720
ke layar tempat baru yang merupakan tempat saya menggunakan pemilih lokasi dan di

87
00:06:39,960 --> 00:06:45,600
sana saya akan mengatur prop navigasi ini dan meneruskan props. navigasi yang saya miliki di sini memang tersedia

88
00:06:45,600 --> 00:06:49,170
karena ini adalah komponen yang dimuat langsung melalui navigator, jadi sekarang

89
00:06:49,170 --> 00:06:54,960
saya hanya meneruskan akses ke alat peraga navigasi saya. Dan dengan itu jika sekarang kita kembali dan mengklik

90
00:06:55,680 --> 00:07:00,300
ini, kita memuat peta ini di sini atau setidaknya layar peta tetapi di

91
00:07:00,320 --> 00:07:01,740
mana peta itu?

92
00:07:01,820 --> 00:07:09,290
Yah peta itu tidak terlihat karena, dan itu penting, untuk peta Anda, Anda perlu menambahkan gaya dan

93
00:07:09,290 --> 00:07:15,130
di sini, saya akan menambahkan gaya. peta dan itu bisa menjadi gaya yang sangat sederhana tetapi Anda hanya

94
00:07:15,140 --> 00:07:18,520
perlu menentukan seberapa besar seharusnya karena secara default, itu tidak akan menempati ruang apa pun.

95
00:07:18,560 --> 00:07:24,410
Jadi dengan hanya mengatur flex ke satu di sini dan mengatakan itu harus mengambil semua ruang yang didapatnya, hanya dengan melakukan

96
00:07:24,410 --> 00:07:26,840
itu, Anda akan memastikan bahwa Anda melihat peta.

97
00:07:26,840 --> 00:07:35,360
Jadi sekarang dengan itu jika Anda mengklik ini, di sini adalah peta kita dimuat. Sekarang juga patut dicatat, di iOS Anda secara otomatis menggunakan Apple Maps,

98
00:07:35,450 --> 00:07:40,490
meskipun Anda juga dapat menggunakan Google Maps di sana jika Anda mau, dokumen resmi

99
00:07:40,490 --> 00:07:44,680
memberi tahu Anda caranya, di Android Anda selalu menggunakan google maps.

100
00:07:44,690 --> 00:07:46,820
Jadi di sini jika saya klik pilih pada

101
00:07:46,910 --> 00:07:53,430
peta, kita juga akan melihat bahwa begitu kita memuat layar baru itu, ini dia. Sekarang tentu saja, kita juga dapat pergi ke layar itu

102
00:07:53,430 --> 00:07:55,290
dengan mengklik pratinjau kami di sini,

103
00:07:55,350 --> 00:07:56,580
itulah yang kami

104
00:07:56,580 --> 00:08:00,500
atur dengan benar, sehingga juga berfungsi, tentu saja juga berfungsi di iOS.

105
00:08:00,540 --> 00:08:05,940
Ngomong-ngomong, animasi di sini tidak super mulus, pada perangkat nyata, jadi itu bukan

106
00:08:05,940 --> 00:08:09,300
masalah, itu hanya di sini di emulator.

107
00:08:09,300 --> 00:08:14,040
Jadi dengan itu kita memiliki peta kita di sini dan di peta ini, kita dapat menggulir. Sekali lagi, pada simulator mungkin agak

108
00:08:14,040 --> 00:08:16,620
kecil, pada perangkat nyata itu tidak akan.

109
00:08:16,620 --> 00:08:21,090
Jadi di sini Anda dapat menggulir, Anda juga dapat mencubit dan memperbesar, sehingga Anda dapat melakukan semua

110
00:08:21,090 --> 00:08:23,150
itu dan dengan itu, kita melihat peta.

111
00:08:23,220 --> 00:08:27,570
Sekarang peta dapat digunakan tetapi tentu saja, kita belum dapat memilih tempat di sana, jadi itu

112
00:08:27,600 --> 00:08:29,430
hal berikutnya yang perlu kita ubah.