cari

Rumah >hujung hadapan web >tutorial js >js kaedah html5 untuk mendapatkan maklumat lokasi geografi pengguna dan memaparkannya pada kemahiran Google Maps_javascript

js kaedah html5 untuk mendapatkan maklumat lokasi geografi pengguna dan memaparkannya pada kemahiran Google Maps_javascript

WBOY
WBOYasal
2016-05-16 15:56:261753semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan js html5 untuk mendapatkan maklumat lokasi geografi pengguna dan memaparkannya pada Peta Google. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: 

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
 {
 if (navigator.geolocation)
  {
  navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
 else{x.innerHTML="Geolocation is not supported by this browser.";}
 }
function showPosition(position)
 {
 var latlon=position.coords.latitude+","+position.coords.longitude;
 var img_url="http://maps.googleapis.com/maps/api/staticmap&#63;center="
 +latlon+"&zoom=14&size=400x300&sensor=false";
 document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
 }
function showError(error)
 {
 switch(error.code) 
  {
  case error.PERMISSION_DENIED:
   x.innerHTML="User denied the request for Geolocation."
   break;
  case error.POSITION_UNAVAILABLE:
   x.innerHTML="Location information is unavailable."
   break;
  case error.TIMEOUT:
   x.innerHTML="The request to get user location timed out."
   break;
  case error.UNKNOWN_ERROR:
   x.innerHTML="An unknown error occurred."
   break;
  }
 }
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan web semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang penggunaan atribut prototaip dalam pengetahuan JavaScript_BasicArtikel seterusnya：Penjelasan terperinci tentang penggunaan atribut prototaip dalam pengetahuan JavaScript_Basic

Artikel berkaitan

Lihat lagi