社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文

HTML5 Geolocation（地理定位）

HTML5 Geolocation（地理定位）

#HTML5 Geolocation（地理定位）用於定位使用者的位置。

定位使用者的位置

#HTML5 Geolocation API 用於取得使用者的地理位置。

鑑於該特性可能侵犯使用者的隱私，除非使用者同意，否則使用者位置資訊是不可用的。

瀏覽器支援

8.jpg


Internet Explorer 9+, Firefox, Chrome, Safari 和Opera 支援Geolocation（地理定位）.

注意: Geolocation（地理定位）對於擁有GPS 的設備，例如iPhone，地理定位更加精確。

HTML5 - 使用地理定位

#請使用 getCurrentPosition() 方法來取得使用者的位置。

下例是一個簡單的地理定位實例，可傳回使用者位置的經度與緯度:

<!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);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        x.innerHTML="纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude;
    }
</script>
</body>
</html>

執行程式試試看

實例解析:

偵測是否支援地理定位

如果支持，則執行getCurrentPosition() 方法。如果不支持，則向使用者顯示一段訊息。

如果getCurrentPosition()運作成功，則向參數showPosition中規定的函數傳回coordinates物件

showPosition() 函數取得並顯示經度和緯度

上面的範例是一個非常基礎的地理定位腳本，不含錯誤處理。

處理錯誤和拒絕

#getCurrentPosition() 方法的第二個參數用於處理錯誤。它規定當獲取用戶位置失敗時運行的函數：

<!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>

運行程式嘗試

#錯誤代碼：

Permission denied -使用者不允許地理定位

Position unavailable - 無法取得目前位置

#Timeout - 操作逾時

##在地圖中顯示結果

如需在地圖中顯示結果，您需要存取可使用經緯度的地圖服務，例如Google地圖或百度地圖：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        var latlon=position.coords.latitude+","+position.coords.longitude;
        var img_url="http://maps.googleapis.com/maps/api/staticmap?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="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                break;
        }
    }
</script>
</body>
</html>

執行程式嘗試

在上例中，我們使用傳回的經緯度資料在Google地圖中顯示位置（使用靜態影像）。

實例

如

何使用Google地圖腳本來顯示帶有標記、縮放和拖曳選項的互動式地圖。 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        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="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                break;
        }
    }
</script>
</body>
</html>

執行程式嘗試一下

#給定位置的資訊

本頁示範的是如何在地圖上顯示使用者的位置。不過，地理定位對於給定位置的資訊同樣有用處。

實例:

  • 更新本地資訊

  • #顯示使用者周圍的興趣點

  • #互動式車載導航系統(GPS)

#

getCurrentPosition() 方法 - 傳回資料

若成功，則 getCurrentPosition() 方法傳回物件。總是會傳回 latitude、longitude 以及 accuracy 屬性。如果可用，則會傳回其他下面的屬性。

##coords.altitude海拔，海平面以上以米計
          #描述
coords.latitude#十進位數的緯度
coords.longitude十進位數的經度
coords.accuracy位置精確度
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，從正北開始以度計
coords.speed速度，以米/每秒計
timestamp 回應的日期/時間

#Geolocation 物件

watchPosition() -返回使用者的目前位置，並繼續返回使用者移動時的更新位置（就像汽車上的GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的範例展示 watchPosition() 方法。您需要一台精確的 GPS 裝置來測試該範例（例如 iPhone）：

<!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.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>



#
繼續學習
||
<!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); } else{x.innerHTML="该浏览器不支持获取地理位置。";} } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </script> </body> </html>
提交重置程式碼
上一節 下一節
教程列表
獲取幫助
  • 課程推薦
  • 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~

看過本課程的同學也在學習

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)  493127 次播放