Dapatkan lokasi pengguna dari browser dengan JavaScript

Programming

Oleh Vinci terakhir diubah pada 5 September 2022.

Tutorial ini menggunakan API geolokasi JavaScript untuk mendapatkan lokasi pengguna. Panggilan API ini mengembalikan koordinat lokasi dan detail geolokasi lainnya.

Contoh cepat berikut memiliki fungsi dapatkanLatLong() yang menggunakan GeoLocation API. panggilan navigator.geplocation.getCurrentPosition(). Fungsi ini harus menentukan keberhasilan dan kesalahan fungsi panggilan balik.

Jika berhasil, kembalikan larik koordinat geolokasi. Panggilan kesalahan berisi kode kesalahan yang dikembalikan oleh API. Kedua panggilan menulis respons ke konsol browser.

Lokasi pengguna adalah informasi sensitif privasi. Sebelum mengerjakan akses lokasi, kita perlu mengetahuinya. Karena sensitif, secara default browser dan sistem operasi yang mendasarinya tidak mengizinkan akses ke informasi lokasi pengguna.

Penting! Pengguna harus

  1. Aktifkan layanan lokasi secara eksplisit di tingkat sistem operasi.
  2. Izinkan browser menerima informasi lokasi.

Pada artikel sebelumnya, kita melihat cara mendapatkan lokasi geografis negara berdasarkan alamat IP menggunakan PHP.

Contoh cepat

function getLatLong() {
	// using the JavaScript GeoLocation API
	// to get the current position of the user
	// if checks for support of geolocation API
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
			function(currentPosition) { console.log(currentPosition)}, 
			function(error) { console.log("Error: " + error.code)}
		);
	} else {
		locationElement.innerHTML = "JavaScript Geolocation API is not supported by this browser.";
	}
}

Fungsi JavaScript GeoLocation API getCurrentPosition ()

Kode di bawah ini adalah perpanjangan dari contoh cepat dengan Geo Location API. Ini memiliki antarmuka pengguna yang mengontrol panggilan fungsi JavaScript untuk mendapatkan posisi pengguna saat ini.

Tujuan dari kode HTML adalah untuk mencetak koordinat lokasi yang dikembalikan oleh API.

Aksara Jawa pergi dan membawa Parameter callback berisi semua detail geolokasi. Fungsi callback membaca garis lintang dan garis bujur dan menampilkannya pada target HTML melalui JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>Get User Location from Browser with JavaScript</title>
<link rel="stylesheet" href="https://phppot.com/javascript/get-user-location-browser-javascript/style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <h1>Get User Location from Browser with JavaScript</h1>
        <p>This example uses JavaScript's GeoLocation API.</p>
        <p>Click below button to get your latitude and longitude
            coordinates.</p>
        <div class="row">
            <button onclick="getLatLong()">Get Lat Lng Location
                Coordinates</button>
        </div>
        <div class="row">
            <p id="location"></p>
        </div>
    </div>
    <script>
	var locationElement = document.getElementById("location");
    function getLatLong() {
        // using the JavaScript GeoLocation API
        // to get current position of the user
        // if checks for support of geolocation API
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                displayLatLong, displayError);
        } else {
            locationElement.innerHTML = "JavaScript Geolocation API is not supported by this browser.";
        }
    }
    
    /**
     * displays the latitude and longitude from the current position 
     * coordinates returned by the geolocation api.
     */
    function displayLatLong(currentPosition) {
        locationElement.innerHTML = "Latitude: "
            + currentPosition.coords.latitude
            + "<br>Longitude: "
            + currentPosition.coords.longitude;
    }
    
    /**
     * displays error based on the error code received from the
     * JavaScript geolocation API
     */
    function displayError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                locationElement.innerHTML = "Permission denied by user to get location."
                break;
            case error.POSITION_UNAVAILABLE:
                locationElement.innerHTML = "Location position unavailable."
                break;
            case error.TIMEOUT:
                locationElement.innerHTML = "User location request timed out."
                break;
            case error.UNKNOWN_ERROR:
                locationElement.innerHTML = "Unknown error in getting location."
                break;
        }
    }
	</script>
</body>
</html>

Dapatkan output browser dari lokasi pengguna

Dalam contoh skrip di atas, kami memiliki fungsi untuk melewatkan kesalahan. Penting untuk mempertimbangkan fungsi ini saat menerima lokasi pengguna melalui browser. Karena secara default pengaturan izin pengguna dinonaktifkan.

Jadi sebagian besar waktu ketika skrip ini dipanggil, kami mendapatkan kesalahan. Oleh karena itu, kita harus mendeklarasikan dan mengirim pengontrol ini sebagai panggilan ke fungsi getCurrentPosition. Jika terjadi kesalahan, JavaScript memanggil penangan kesalahan ini.

Keluaran Geo API

Di bawah ini adalah format output yang dikembalikan oleh API geolokasi JavaScript. Kami terutama akan menggunakan bujur dan lintang dari hasil. “Velocity” dapat digunakan saat mengambil posisi dinamis pengguna. Kita akan melihatnya di akhir tutorial ini.

{
  coords = { 
    latitude: 30.123456,
    longitude: 80.0253546,
    altitude: null,
    accuracy: 49,
    altitudeAccuracy: null,
    heading: null,
    speed: null,
  },
  timestamp: 1231234897623
}

Tampilkan demo

Lokasi pengguna berdasarkan geocoding

Dengan melewati lintang dan bujur seperti di bawah ini, kita bisa mendapatkan lokasi pengguna. Berbagai penyedia layanan tersedia dan di bawah ini adalah contoh penggunaan Google API.

const lookup = position => {
	const { latitude, longitude } = position.coords;
	fetch(`http://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}`)
		.then(response => response.json())
		.then(data => console.log(data)); //
}

Dapatkan posisi dinamis pengguna dari browser menggunakan watchPosition()

Berikut adalah bagian yang menarik dari tutorial. Bagaimana Anda mendapatkan posisi dinamis pengguna, yaitu saat dia bergerak?

Kita perlu menggunakan fungsi lain dari GeoLocation API untuk mendapatkan koordinat lokasi dinamis yang bergerak. Fungsi posisi menonton() Ini menggunakan JavaScript untuk melakukan ini.

Untuk menguji skrip ini, jalankan di browser seluler saat mengemudikan kendaraan untuk mendapatkan posisi dinamis pengguna.

Saya telah menyediakan bagian kode yang relevan di bawah ini. Anda bisa mendapatkan skrip lengkap dari file zip proyek, unduh gratis di bawah ini.

var locationElement = document.getElementById("location");
		function getLatLong() {
			// note the usage of watchPosition, this is the difference
			// this returns the dynamic user position from browser
			if (navigator.geolocation) {
				navigator.geolocation.watchPosition(displayLatLong,
						displayError);
			} else {
				locationElement.innerHTML = "JavaScript Geolocation API is not supported by this browser.";
			}
		}

Lihat dan unduh versi demo

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.