Menggunakan Vue Js Untuk Melacak Users Seperti Geolocations API dan Google Geocoding API
Mendapatkan lokasi pengguna adalah salah satu langkah penting saat membangun aplikasi yang mengandalkan alamat jalan seperti aplikasi pesan-antar makanan misalnya.
Pada artikel ini, saya akan membahas dengan cepat cara mendapatkan lokasi pengguna menggunakan Geolokasi HTML5 dan API Geocoding Google di proyek vue.js.
Saya berasumsi bahwa Anda sudah tahu cara memulai dan menjalankan proyek vue.js.
Struktur folder terlihat seperti ini:
Buat component vue bernama UserLocation.vue di folder component Anda dan tentukan objek root di file router/index.js Anda.
Di dalam component UserLocation.vue, tambahkan kode berikut.
<template>
<section class="ui two column centered grid">
<div class="column">
<form class="ui segment large form">
<div class="field">
<div class="ui right icon input large">
<input
type="text"
placeholder="Enter your address"
v-model="address"
ref="autocomplete"
/>
<i class="dot circle link icon" @click="locatorButtonPressed"></i>
</div>
</div>
</form>
</div>
</section>
</template>
tampilannya seperti ini:
Seperti yang Anda lihat, ada field input dengan tombol di sebelah kanan dan beberapa elemen yang menggunakan kerangka UIcss semantik untuk membangun tata letak berbasis kisi.
Saya telah menambahkan tautan UICDN semantik di file index.html.
field input juga memiliki direktif v-model dengan nilai properti yang disebut alamat, dan tombol samping memiliki fungsi panggilan balik peristiwa klik yang disebut locatorButtonPressed.
Mari kita definisikan mereka. Dapatkan koordinat geografis pengguna menggunakan HTML5 Geolocation API
Untuk mendapatkan koordinat geografis (lintang dan bujur), panggil metode getCurrentPosition() pada objek navigator.
locatorButtonPressed() {
navigator.geolocation.getCurrentPosition(
position => {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
},
error => {
console.log(error.message);
},
)
}
Metode GetCurrentPosition() membutuhkan beberapa argumen.
Yang pertama adalah fungsi panggilan balik sukses yang mengembalikan objek dengan data koordinat yang ditentukan oleh posisi parameter.
Yang kedua adalah fungsi panggilan balik kesalahan.
Saat metode getCurrentPosition() dipanggil, browser menampilkan pemberitahuan bahwa pengguna dapat mengizinkan (fungsi panggilan balik berhasil) atau memblokir (fungsi panggilan balik kesalahan).
Ini cukup mudah.
Konversikan koordinat ke alamat menggunakan Geocoding API
API geocoding adalah bagian dari Google Maps API, proses mengubah alamat menjadi koordinat geografis (seperti garis lintang dan garis bujur).
Tapi yang kami inginkan adalah geocoding terbalik, proses mengubah koordinat geografis menjadi alamat yang dapat dibaca manusia.
Untuk menggunakan API ini, Anda perlu mendapatkan kunci dari platform cloud Google dan mengaktifkan Geocoding API dan Maps JavaScript API.
Mari kita buat permintaan HTTP ke Geocoding API menggunakan client HTTP Axios.
Untuk melakukannya, buat fungsi lain yang disebut getStreetAddressFrom(lat, long) menggunakan parameter di objek metode.
async getStreetAddressFrom(lat, long) {
try {
var { data } = await axios.get(
"https://maps.googleapis.com/maps/api/geocode/json?latlng=" +
lat +
"," +
long +
"&key={yourAPIKey}"
);
if(data.error_message) {
console.log(data.error_message)
} else {
this.address = data.results[0].formatted_address;
}
} catch (error) {
console.log(error.message);
}
}
Seperti yang Anda lihat, getStreetAddressFrom() menggunakan pola Async dan Await, dan di dalam blok try, menggunakan Axios untuk mengirim permintaan HTTP ke API geocoding menggunakan beberapa parameter kueri.
Parameter pertama adalah garis lintang, yang nilainya adalah garis lintang dan garis bujur yang diteruskan ke fungsi dan kunci API.
Kemudian periksa apakah ada kesalahan yang dikirim oleh API. Jika tidak, atur alamat yang diformat di field input.
Langkah terakhir adalah memanggil fungsi ini dalam fungsi callback sukses dari metode getCurretnPosition().
locatorButtonPressed() {
navigator.geolocation.getCurrentPosition(
position => {
this.getStreetAddressFrom(position.coords.latitude, position.coords.longitude)
},
error => {
console.log(error.message);
}
);
},
Ada masalah di sini Ya, API diekspos ke client, jadi siapa pun bisa mengajukan permintaan. Untuk mencegah pencurian kuota, Anda dapat membatasi kunci API dengan hanya mengizinkan domain tertentu. Silakan dan edit kuncinya
Kemudian buka ini:
Di Aplikasi, di bawah Pembatasan>Tambahkan Item, masukkan alamat situs web yang hanya menggunakan kunci API ini.
Anda mungkin melihat kesalahan berikut di konsol browser:
Penagihan harus diaktifkan di Google Cloud Project https://console.cloud.google.com/project/_/billing/aktifkan Pelajari lebih lanjut di https://developers.google.com/maps/gmp-get-startedPenagihan harus diaktifkan agar API geocoding berfungsi. Ini tidak akan berfungsi kecuali diaktifkan.
Buka GoogleCloudConsole->Pilih Proyek->Pilih Penagihan dari Bilah Sisi->Tambahkan Penagihan
bagus! Itu saja.. tapi itu belum selesai.
Autocomplate
Ada beberapa kasus tepi di mana pengguna harus memasukkan alamat mereka secara manual. Misalnya, pengguna menolak untuk membagikan lokasi mereka, atau API geoposisi HTML5 tidak mendukung browser mereka.
Terima kasih kepada pustaka pelengkapan otomatis yang merupakan bagian dari pustaka googleplaces untuk Maps JavaScript API.
Pelengkapan otomatis menyarankan alamat dalam daftar tarik-turun saat pengguna mulai mengetik alamat mereka. Untuk memulai, tambahkan URL JavaScript API pelengkapan otomatis ke index.html.
Ini membutuhkan dua parameter kueri. Yang pertama adalah perpustakaan yang ingin Anda gunakan dalam kasus ini. Pelengkapan otomatis adalah bagian darinya, jadi tentukan lokasinya. Yang kedua adalah kunci API.
Di dalam component UserLocation.vue, tambahkan kode berikut di dalam fungsi mount().
ini. Gunakan $refs[“autocomplete”] untuk membuat instance metode Autocomplete yang menempatkan objek dalam fungsi Inside-Mounted() yang melewati elemen input.
Saat Anda menjalankan aplikasi, Anda akan melihat menu tarik-turun seperti tangkapan layar di bawah ini.
Jika ini tidak berhasil, pastikan pustaka Maps JavaScript API dan Places API diaktifkan di Google Cloud Console.Jika Anda memerlukan bantuan dengan ini, jangan ragu untuk menghubungi kami di bagian komentar di bawah.