Sobatcoding.com - Cara Mendapatkan Lokasi Latitude dan Longitude Menggunakan Javascript
Pada tutorial kali ini kita akan membahas Cara Mendapatkan longitude dan latitude mengunakan Javascript ( javascript get current location latitude and longitude ) .
Pertama kita buat dahulu file html seperti pada kode berikut :
Pastikan browser mendapatkan akses dari lokasi kita dengan cara cara mengaktifkan fitur enable location di masing-masing browser.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
handlePermission(this);
function handlePermission(geoBtn) {
navigator.permissions.query({name:'geolocation'}).then(function(result) {
if( result.state == 'prompt' || result.state == 'granted' )
{
navigator.geolocation.getCurrentPosition(revealPosition,showErrorLocation);
}else{
console.log( result.state );
}
result.onchange = function() {
console.log(result.state);
}
});
}
function revealPosition(position)
{
var data = position.coords;
var lat = data.latitude;
var long = data.longitude;
alert("Lat : " + lat + ", Long: " + long );
}
function showErrorLocation(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
var err = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
var err = "Location information is unavailable."
break;
case error.TIMEOUT:
var err = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
var err = "An unknown error occurred."
break;
}
console.log(err);
}
</script>
</body></html>
Pastikan fitur location sudah enable di browser teman-teman.
Selamat mencoba!
Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.
Semoga bermanfaat.
Komentar 1