Dapatkan lokasi GPS dari browser web


164

Saya sedang mengembangkan situs web berbasis seluler, di sana saya telah mengintegrasikan Google Maps, saya perlu mengisi bidang 'Dari' Google Maps secara dinamis.

Apakah mungkin untuk mendapatkan lokasi GPS dari browser web dan mengisinya di bidang 'Dari' Google Map secara dinamis?


2
Ponsel apa yang ingin Anda dukung?
Rowland Shaw

saya ingin mendukung semua peramban seluler, tetapi i-phone adalah prioritas utama
Ganesh

Anda mungkin lebih baik menulis aplikasi asli, karena itu akan memungkinkan integrasi yang lebih ketat dengan perangkat keras, di mana tersedia
Rowland Shaw

16
jika kebutuhan hanya mengenai lokasi, maka aplikasi asli sangat berlebihan. iOS bukan satu-satunya ponsel, itu hanya prioritas.
Gonçalo Veiga

Jawaban:


194

Jika Anda menggunakan Geolocation API , itu akan sesederhana menggunakan kode berikut.

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

Anda juga dapat menggunakan API Lokasi Klien Google .

Masalah ini telah dibahas dalam Apakah mungkin mendeteksi lokasi GPS peramban seluler? dan Dapatkan data posisi dari browser seluler . Anda dapat menemukan informasi lebih lanjut di sana.


Apakah API Lokasi Klien Google disebutkan masih ada? Tautan yang disediakan menuju ke Google Loader
Shane N

1
Saya tidak melihatnya di halaman itu sebagai salah satu API yang tersedia. - Anda dapat menggunakan Google Latitude API: code.google.com/apis/latitude - Dengan ini dimungkinkan untuk mendapatkan lokasi klien saat ini: code.google.com/apis/latitude/v1/…
dochoffiday

1
Untuk pembaca masa depan, akurasi diukur dalam meter .
johnnyRose

Hyy dapatkah kita mengaktifkan lokasi berbagi secara otomatis melalui pengkodean
Tn. Tomar

2
Apakah ini meminta penggunaan lokasi Anda?
Jack

21

Untuk memberikan jawaban yang sedikit lebih spesifik. HTML5 memungkinkan Anda untuk mendapatkan koordinat geografis, dan melakukan pekerjaan yang cukup baik. Secara keseluruhan dukungan browser untuk geolokasi cukup bagus, semua browser utama kecuali ie7 dan ie8 (dan opera mini). IE9 melakukan pekerjaan tetapi merupakan pemain terburuk. Periksa caniuse.com:

http://caniuse.com/#search=geol

Anda juga memerlukan persetujuan dari pengguna Anda untuk mengakses lokasi mereka, jadi pastikan Anda memeriksa ini dan memberikan beberapa instruksi yang layak jika dimatikan. Khusus untuk izin menghidupkan iPhone untuk Safari agak rumit.


dotnetcurry.com/aspnet-mvc/782/… adalah referensi praktis untuk implementasi di lingkungan asp.net mvc
Walter de Jong

13

Gunakan ini, dan Anda akan menemukan semua informasi di http://www.w3schools.com/html/html5_geolocation.asp

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>

1
Hanya sebuah catatan: getCurrentPosition () dan watchPosition () tidak lagi berfungsi pada asal tidak aman. Untuk menggunakan fitur ini, Anda harus mempertimbangkan untuk mengalihkan aplikasi Anda ke sumber yang aman, seperti HTTPS.
user2589273

4

Ada GeoLocation API , tetapi dukungan browser agak tipis saat ini. Sebagian besar situs yang peduli tentang hal-hal seperti itu menggunakan database GeoIP (dengan ketentuan umum tentang ketidakakuratan sistem semacam itu). Anda juga bisa melihat layanan pihak ketiga yang membutuhkan kerja sama pengguna seperti FireEagle .


1
terima kasih banyak atas tanggapan cepat Anda. jika memungkinkan, dapatkah Anda memberi saya beberapa tips lagi ...
Ganesh

2

Tampak

/*
  function geo_success(position) {
    do_something(position.coords.latitude, position.coords.longitude);
  }

  function geo_error() {
    alert("Sorry, no position available.");
  }

  var geo_options = {
    enableHighAccuracy: true,
    maximumAge        : 30000,
    timeout           : 27000
  };

  var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
  */
  getLocation(): Observable<Position> {
    return Observable.create((observer) => {
      const watchID = navigator.geolocation.watchPosition((position: Position) => {
        observer.next(position);
      });
      return () => {
        navigator.geolocation.clearWatch(watchID);
      };
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

1

Mari kita gunakan fungsi panah lemak terbaru :

navigator.geolocation.getCurrentPosition((loc) => {
  console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.