masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Geolokasi HTML5

Geolokasi HTML5

Geolokasi HTML5 digunakan untuk mencari lokasi pengguna.

Cari lokasi pengguna

API Geolokasi HTML5 digunakan untuk mendapatkan lokasi geografi pengguna.

Memandangkan ciri ini mungkin melanggar privasi pengguna, maklumat lokasi pengguna tidak tersedia melainkan pengguna bersetuju.

Sokongan penyemak imbas


Internet Explorer 9+, Firefox, Chrome, Safari dan Opera menyokong Geolokasi.

Nota: Geolokasi lebih tepat untuk peranti dengan GPS, seperti iPhone.

Kesan sama ada penyemak imbas menyokong: 

if (navigator.geolocation) { 
   //console.log("浏览器支持!"); 
   }else { 
      // console.log("浏览器不支持!");
 }

navigator.geolocation digunakan untuk mendapatkan lokasi geografi pengguna semasa berdasarkan penyemak imbas, menyediakan 3 Kaedah: 

void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置
int watchCurrentPosition(onSuccess,onError,options);//持续获取当前用户位置
void clearWatch(watchId);//watchId 为watchCurrentPosition返回的值//取消监控
rrree

Mengendalikan ralat dan penolakan

Parameter kedua kaedah getCurrentPosition() digunakan untuk mengendalikan ralat. Ia menentukan fungsi yang akan dijalankan apabila mendapatkan lokasi pengguna gagal:

Instance

实例：
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>基于浏览器的HTML5查找地理位置</title> 
    <!-- 百度API -->
 <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  
  <script>
           function getLocation(){
               var options={
                   enableHighAccuracy:true, 
                   maximumAge:1000
               }
               if(navigator.geolocation){
                   //浏览器支持geolocation
                   navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
                   
               }else{
                   //浏览器不支持geolocation
               }
           }
           //成功时
           function onSuccess(position){
               //返回用户位置
               //经度
               var longitude =position.coords.longitude;
               //纬度
               var latitude = position.coords.latitude;
               //使用百度地图API
               //创建地图实例  
               var map =new BMap.Map("container");
               //创建一个坐标
               var point =new BMap.Point(longitude,latitude);
               //地图初始化，设置中心点坐标和地图级别  
               map.centerAndZoom(point,15);
           }
           //失败时
           function onError(error){
               switch(error.code){
                   case 1:
                   alert("位置服务被拒绝");
                   break;
                   case 2:
                   alert("暂时获取不到位置信息");
                   break;
                   case 3:
                   alert("获取信息超时");
                   break;
                   case 4:
                    alert("未知错误");
                   break;
               }
           }
           window.onload=getLocation;
   </script>
</head>
<body
   <div id="container" style="width:600px;height:600px"></div>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>php中文网(php.cn)</title>  </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p> <button onclick="getLocation()">点我</button> <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) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } } </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492832 permainan