Jadi sekarang saya juga ingin menampilkan pratinjau peta kecil di sini dan tentu saja ada berbagai cara untuk
melakukannya dan nanti kami juga akan menambahkan peta interaktif ke aplikasi ini.
Untuk saat ini, saya hanya ingin
memiliki gambar statis, jadi seperti snapshot peta dan yang keren adalah Google memiliki API untuk kami yang menghasilkan snapshot seperti itu.
Anda dapat google untuk Google Maps API statis untuk menemukan dokumentasi resmi di mana Anda dapat
mempelajari semua itu
tentu saja dan pada akhirnya, menggunakan API itu sangat mudah.
Anda hanya perlu mengirim permintaan ke URL ini dan ini sudah memberi Anda kembali gambar, jadi
Anda bisa menggunakan tautan ini pada komponen gambar dan Anda baik-baik saja.
Satu-satunya hal yang rumit di sini adalah hal kunci API ini, di sana Anda memerlukan kredensial API Anda
dan untuk itu, Anda memerlukan kunci API.
Sekarang untuk ini, Anda cukup mengklik pada kunci API Anda di sini dan menghasilkan satu dan sekarang Anda dapat
memilih proyek yang sudah Anda miliki atau Anda membuat proyek baru
dan untuk itu Anda perlu membatalkan di sini dan bukannya gulir ke bawah sedikit lebih jauh ke
ini untuk memulai, aktifkan bagian API di sini dan klik untuk memulai di sini.
Sekarang setelah Anda melakukannya, Anda akan dibawa ke konsol platform Google Maps di mana
Anda sekarang dapat mengaktifkan berbagai fitur Google Maps yang ingin Anda gunakan dan di sini, saya
tertarik pada peta yang nantinya akan membantu kami menggunakan aplikasi dinamis interaktif ini di Android dan saya tertarik pada tempat.
Jadi kedua hal ini harus diperiksa,
kita tidak perlu rute karena kita tidak membangun fitur navigasi di sini dan dengan itu, kita dapat mengklik
lanjutkan, pilih proyek dan sekarang baik pilih proyek yang sudah ada atau cukup buat yang
baru satu dan saya akan membuat yang baru di sini dan beri nama Bereaksi Panduan Lengkap tetapi Anda dapat
memberi nama apa pun yang
Anda inginkan, klik berikutnya di sini dan tunggu ini dihasilkan.
Ini seharusnya relatif cepat dan sekarang kami khawatir tentang harga saat
ini sedang dimuat.
Anda biasanya dapat menggunakan ini secara gratis tetapi Anda memerlukan akun penagihan dan itulah
yang saya minta di sini.
Anda tentu saja
memerlukan akun Google dan di akun Google ini, Anda harus memiliki
kartu kredit untuk menggunakannya, jika tidak, sayangnya Anda tidak dapat menggunakannya.
Jadi Anda memerlukan kartu kredit,
Anda harus memiliki akun penagihan yang diatur di akun Google Anda dan kemudian Anda dapat menggunakan
akun google login ini untuk proyek ini yang saya lakukan di sini. Dengan itu diaktifkan, Anda masih dapat menggunakannya secara gratis, Anda
mendapatkan tingkat gratis yang sangat murah
hati dan terlampir Anda menemukan tautan ke harga platform Google Maps dan hanya jika Anda
melanggar batas-batas tertentu yang tidak akan kami langgar untuk sedikit penggunaan yang kami miliki di sini di video
ini, hanya jika Anda akan melanggar batas ini Anda akan membayar.
Sekarang tetap sadar bahwa mungkin ada titik di mana Anda harus membayar dan
itu tergantung pada seberapa banyak Anda menggunakan API dan karena itu pasti memeriksa dokumen penetapan harga.
Sekarang di sini, saya sudah mengaktifkan semuanya dan saya baru saja menyelesaikan ini
dan pada akhirnya, Anda akan dihadapkan dengan kunci API yang tentu saja saya akan membatalkan setelah rekaman ini.
Jadi Anda tidak dapat menggunakan milik saya tetapi Anda harus
mengambil milik Anda dan sekarang ini adalah kunci API yang perlu Anda masukkan di sini ke URL ini.
Jadi sekarang saya hanya akan menyalin seluruh URL ini di sini dan memindahkannya ke dalam kode kami dan di sana,
saya sekarang ingin menampilkan gambar di sini yang menunjuk pada URL itu karena seperti yang saya sebutkan,
ini adalah bagaimana Anda bisa mendapatkan gambar ini, URL ini mengembalikan gambar.
Sekarang yang akan saya lakukan adalah saya akan membuat komponen baru di sini yang akan saya beri nama MapPreview. js karena saya juga akan menggunakannya
di tempat lain dari aplikasi nanti di mana saya mengimpor Bereaksi dari Bereaksi
dan di mana saya kemudian mengimpor gambar dan stylesheet dari Bereaksi Asli, seperti ini.
Kemudian di sini, saya akan membuat komponen pratinjau peta saya yang menerima alat peraga tentu saja tidak mengejutkan, yang perlu mengembalikan beberapa
jsx nanti dan mengatur beberapa gaya di sini dengan Stylesheet. buat dan tentu
saja juga ekspor komponen pratinjau peta ini.
Sekarang di sini, saya ingin membuat URL ini yang baru saja saya bicarakan,
jadi di sini URL pratinjau gambar harus dibuat dan itu dapat dilakukan dengan menggunakan back ticks di sini sehingga saya dapat menambahkan konten dinamis ke dalam teks
dengan mudah dan kemudian menyalinnya URL yang baru saja Anda salin dari dokumentasi di sini, pastikan
semuanya dalam satu
baris karena secara default tidak, jadi pastikan semuanya dalam satu
baris jika tidak, ini tidak akan berfungsi
dan sekarang tentu saja ada beberapa
segmen yang perlu Anda lakukan. ganti,
misalnya di sini, bagian tengah sama dengan bagian. Secara default, ini menunjuk ke Jembatan Brooklyn dan Anda
dapat memasukkan alamat di sini tetapi Anda juga dapat memasukkan pasangan garis lintang dan bujur di sini.
Jadi yang akan saya lakukan di sini adalah saya akan secara dinamis menambahkan dua informasi di sini yang dipisahkan oleh koma dan yang pertama
adalah garis lintang. Di sini saya
berharap untuk mendapatkan ini pada alat peraga
saya, saya berharap untuk mendapatkan alat peraga lokasi dan tentu saja ini bisa menjadi nama
alat peraga pilihan Anda yang kemudian harus memiliki kunci lat dan di sini, saya ingin memiliki kunci panjang, kunci lng juga, sehingga akan menjadi
lintang
dan bujur dari lokasi yang ingin saya pratinjau. Sekarang faktor pembesaran, saya akan mengatur ini
menjadi 14, Anda dapat bereksperimen dengan berbagai faktor, ini pada dasarnya mempengaruhi seberapa jauh peta diperbesar atau diperkecil.
Anda juga dapat bermain-main dengan ukuran Anda di sini.
Sekarang karena saya akan memiliki wadah pratinjau peta yang biasanya akan saya gunakan dengan ketinggian 200,
saya akan mengatur ketinggian menjadi 200 di sini dan karenanya saya akan mengatur lebarnya menjadi 400 di sini.
Tentu saja, Anda dapat menggunakan ukuran yang lebih besar di sini daripada yang akan Anda gunakan untuk wadah untuk menampilkan gambar nanti,
hanya perlu diketahui bahwa jika Anda mengambil gambar super besar di sini, tentu saja akan terlalu besar, terlalu
banyak data untuk unduh, ini akan memuat lebih lambat dan Anda mungkin tidak membutuhkannya.
Jadi Anda harus membidik ukuran gambar peta di sini yang sesuai dengan wadah tempat Anda ingin menampilkannya, tidak
harus dengan ukuran yang sama persis tetapi secara kasar. Sekarang tipe peta adalah bagaimana peta harus ditampilkan, Anda bisa menggunakan satelit
di sini tapi saya akan tetap berpegang pada peta jalan standar dan sekarang Anda juga dapat menambahkan penanda ke
peta itu.
Sekarang ada beberapa spidol yang diatur dalam cuplikan
boneka ini, saya akan singkirkan semuanya tetapi satu sehingga saya hanya memiliki spidol di sini, warna merah, label a,
ini bisa
menjadi karakter tunggal di sini
seperti ABC dan kemudian lintang dan bujur tempat penanda ini harus ditempatkan dan tentu saja, itu
lagi alat peraga. lokasi. lat dan kemudian di
sini koma dan sesudahnya, ganti nomor ini dengan alat peraga. lokasi. lng.
Menempatkan spidol seperti itu opsional tapi tentu saja, saya ingin menunjukkan kepada pengguna di mana ini.
Sekarang saya perlu kunci API, jadi saya akan menyalin kunci ini yang dibuat di sini dan ganti di sini.
Sekarang saya tidak dapat menempelkannya seperti ini tetapi sebenarnya, saya ingin mengelola ini dalam file yang terpisah
karena saya akan menggunakan kunci API di tempat lain dari aplikasi juga.
Jadi di sini, saya akan membuat file baru yang akan saya beri nama env. js untuk lingkungan untuk mengatur beberapa
variabel lingkungan dan di sana saya akan mengatur objek dengan kunci Google API saya dan yang seharusnya menjadi nilai ini di sini dan
kemudian saya dapat mengekspor ini dan tentu saja karena itu, yang harus memiliki nama, vars sama dengan dan maka saya mengekspor vars
di sini.
Jadi dengan itu, saya cukup mengimpor dari file env itu dan itulah yang
akan saya lakukan di sini, mengimpor env dari file env di sini dan itu hanya singkatan dari variabel lingkungan seperti yang saya katakan dan sekarang secara dinamis menyuntikkan ini di
sini.
Jadi sekarang kita memiliki satu tempat di mana kita dapat mengubah kunci itu dan di mana kita juga dapat
mengimpornya dari semua tempat aplikasi yang berbeda.
Jadi di sini saya akan secara dinamis menyuntikkan env. googleapikey.
Jadi dengan itu, saya mengatur URL pratinjau
gambar, sekarang dalam komponen ini, kita tentu saja harus mengembalikan pratinjau gambar dan itu umumnya
adalah tampilan yang saya miliki di sini di pemilih lokasi. Jadi saya akan mengambilnya dari sana dan menambahkannya
di pratinjau peta, seperti ini, meskipun konten mundur di sana,
saya sebenarnya ingin meneruskannya dari luar, jadi saya akan memotong ini lagi dan memindahkannya kembali ke pemetik
lokasi.
Namun tidak seperti ini tetapi sebaliknya
di sini, impor komponen pratinjau peta yang baru ditambahkan ini, jadi imporlah dari. / MapPreview, jadi komponen baru ini sedang kami
kerjakan, tambahkan ini di
sini, pratinjau peta
dan kemudian periksa ini untuk pengambilan ini dan indikator serta teks cadangan di sini.
Jadi dalam pratinjau peta, oleh karena itu saya hanya akan memiliki alat peraga anak-anak di sini untuk menampilkan apa yang ditambahkan antara
tag pembuka dan penutup tetapi itu hanya konten cadangan, tentu
saja saya peduli tentang menghasilkan pratinjau nyata di sini. Sekarang untuk itu kita harus memastikan bahwa URL
pratinjau gambar sebenarnya juga bisa kosong jika belum ada tempat yang dipilih, jadi saya akan membuat URL pratinjau
gambar variabel dan hanya menetapkan nilai
di sini dan saya ingin memberikan nilai jika alat peraga. lokasi diatur karena itu juga tidak dapat diatur jika kita
belum memilih lokasi dan sekarang URL pratinjau gambar kosong atau URL ini tergantung pada apakah kita memiliki lokasi yang
dilewati pada prop lokasi dan sekarang kita dapat menggunakan ini di sana untuk menampilkan sesuatu dan omong-omong
karena saya
menggunakan view di sini, tentu saja kita juga harus memastikan
bahwa kita mengimpor view.
Sekarang bagaimana saya menggunakan URL ini?
Nah jika kita memilikinya, saya ingin menggunakannya untuk
menampilkan gambar, kalau tidak saya akan menunjukkan ini alat bantu anak-anak konten mundur.
Jadi di sini kita dapat memeriksa
alat peraga. lokasi, jika itu
diatur saya tahu saya akan memiliki
URL gambar juga, kita tentu saja bisa juga memeriksa keberadaan URL gambar dan jika ini diatur, saya akan menampilkan gambar
di
sini, jika tidak diatur, saya akan alat peraga keluaran anak-anak seperti ini, jadi saya akan menampilkan konten cadangan saya.
Sekarang gambar di sini akan menerima beberapa gaya,
gambar peta dan sumber dan sumber di sini mengambil URI yang menunjuk pada URL pratinjau gambar karena itu akan menjadi URL
jaringan, gambar jaringan, kan?
Jadi sekarang mari kita bawa gaya dari pemilih
lokasi, saya bisa mengambil pratinjau peta tapi saya hanya ingin membawa bagian pembenaran konten dan benar-benar meneruskan sisanya secara manual di sini
dan menggabungkannya, jadi saya akan tetap meneruskan gaya . MapPreview dari dalam pemilih lokasi saya dan di pratinjau peta, sekarang saya ingin
menggabungkan ini dengan gaya saya yang saya atur di sini. Jadi di sini saya akan benar-benar membungkus ini menjadi
objek di mana saya menarik semua gaya yang diatur dalam pratinjau peta di sini dan menggabungkan semua gaya
yang diatur pada prop gaya ini sehingga kami dapat mengatur gaya dari luar juga dan menggabungkannya dengan gaya
internal kami dan sekarang untuk gaya internal pada pratinjau peta, seperti yang baru saja saya katakan, saya akan membenarkan konten dan menyelaraskan item di
sini dan untuk gambar itu sendiri,
jadi untuk gambar peta,
di sana saya ingin mengatur ini untuk mengambil semua lebar dan tinggi yang tersedia dapat diperoleh dan kita perlu
mengatur ini karena ini adalah gambar jaringan. Seperti yang Anda pelajari, untuk itu Anda perlu mengatur
lebar dan tinggi komponen gambar.
Sekarang dengan itu, kita memiliki komponen pratinjau peta yang menampilkan gambar peta ini atau
konten mundur kami yang dilewatkan
dari luar dan melakukannya dengan memeriksa prop lokasi.
Jadi di tempat di mana kita menggunakan komponen pratinjau peta yang tentu
saja adalah pemilih lokasi, kita harus melewati prop lokasi ini
dan prop lokasi, jika kita memeriksa pratinjau peta, pada akhirnya harus menjadi objek dengan garis lintang dan bujur
atau tombol lat dan lng. Jadi karena itu kembali ke
lokasi picker, saya ingin memberikan prop di sini dan memang, itulah yang kami kelola di
sini dengan lokasi pick yang tentu saja bukan kebetulan. Itu adalah objek dengan lintang dan bujur atau itu tidak terdefinisi
pada awalnya dan kami menangani kasus ini di komponen
pratinjau peta juga, jika tidak terdefinisi, kami hanya menunjukkan konten mundur yang dilewatkan dari luar.
Jadi untuk lokasi, kita bisa lewat di lokasi yang dipilih dan dengan itu, kita sekarang harus memiliki
pengaturan di mana kita benar-benar dapat melihat pratinjau tempat.
Jadi sekarang di sini, kita melihat konten
fallback tetapi jika saya sekarang klik pada get user location, kita melihat spinner dan kemudian kita melihat snapshot nyata dari tempat yang
kita pilih.
Seperti yang saya sebutkan, ini bukan tempat saya duduk sekarang, ini
hanya tempat boneka yang diberikan emulator kepada kita. Hal yang sama pada Android,
jika saya mengambil lokasi di sini, sekarang
ini sebenarnya kantor pusat Google yang saya pilih secara default di sana.
Jadi ini berfungsi, sekarang sebagai langkah selanjutnya, saya ingin memastikan
bahwa kami juga dapat memilih tempat ini di peta, bukan hanya mencari kami.