Geolocation di HTML5 - Purwana.Net
  Media Belajar membuat Software Aplikasi, Website, & Game untuk Pemula...

Post Top Ad

Rabu, 13 Desember 2017

Geolocation di HTML5

Berikut contoh kode penulisan untuk menguji Geolocation pada HTML5
Untuk penjelasan lebih lengkap tentang Geolocation HTML dapat dilihat disini.

<script>
navigator.geolocation.getCurrentPosition(
    function(p) {
 alert('Latitude: ' + p.coords.latitude + ', Longitude: ' + 
                    p.coords.longitude + ', Altitude: ' + 
                    p.coords.altitude);
    },
    function () {
  alert('Error locating your device');
    }
);
</script>

atau gunakan kode berikut jika hanya menerima input dari GPS (mode GPS only)

navigator.geolocation.getCurrentPosition(
    function(position) {
    alert('Latitude: ' + position.coords.latitude + ', Longitude: ' + position.coords.longitude + ', Altitude: ' + position.coords.altitude);
    },
    function () {
     alert('Error locating your device');
    },
    {enableHighAccuracy: true}
);

+Google Map:

<p id="demo">Klik tombol untuk mendapatkan posisi</p>

<button onclick="getLocation()">Coba Geolocation + Google Map</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=key-google-map"></script>
<!--
Untuk menggunakan kode ini di website anda, dapatkan key API gratis dari Google.
-->
<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation tidak didukung oleh browser.";
    }
}

function showPosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var latlon = new google.maps.LatLng(lat, lon)
    var mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User menolak permintaan untuk Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Informasi lokasi tidak tersedia."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Permintaan lokasi user sudah timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "Error tidak diketahui."
            break;
    }
}
</script>

Klik tombol untuk mendapatkan posisi

Menggunakan HTML Geolocation Metode getCurrentPosition () digunakan untuk mengembalikan posisi pengguna.
Periksa apakah Geolocation didukung Jika didukung, jalankan metode getCurrentPosition (). Jika tidak, tampilkan pesan ke pengguna Jika metode getCurrentPosition () berhasil, ia mengembalikan objek koordinat ke fungsi yang ditentukan dalam parameter (showPosition) Fungsi showPosition () menampilkan garis lintang dan bujur Contoh di atas adalah script Geolocation yang sangat mendasar, tanpa penanganan error.

Post Top Ad