HTML5地理位置

Geolocation是最好的HTML5 API之一，用于识别Web应用程序的用户地理位置。

HTML5的这一新功能使您可以导航当前网站访问者的纬度和经度坐标。这些坐标可以通过JavaScript捕获并发送到服务器，服务器可以显示您在网站上的当前位置

大多数地理位置服务都使用网络路由地址(例如IP地址，RFID，WIFI和MAC地址)或内部GPS设备来标识用户的位置。

提示：要完全理解Geolocation API的概念，您必须具有一些JavaScript知识。

用户隐私：

用户的位置与隐私有关，因此地理定位API通过在获取位置之前获得用户的许可来保护用户的隐私。地理位置API发送一个通知提示框，用户可以允许或拒绝它，如果用户允许，则只会标识他的位置。

注意：您的浏览器必须支持地理位置才能将其用于Web应用程序。尽管大多数浏览器和移动设备都支持Geolocation API，但该API仅可用于HTTPS请求。

地理位置对象

Geolocation API与navigation.geolocation对象一起使用。它的只读属性返回一个Geolocation对象，该对象标识用户的位置，并可以基于用户的位置生成自定义结果。

句法：

    geo=navigator. geolocation; 

如果存在此对象，则可以获取地理位置服务。

地理位置方法

Geolocation API使用以下三种Geolocation接口方法：

检查浏览器支持：

navigator.geolcation对象的geolocation属性有助于确定浏览器对Geolocation API的支持。

 


    


  
Find your Current location
Click me

获取用户的当前位置：

要获取用户的当前位置，请使用navigator.geolocation对象的getCurrentPosition()方法。此方法接受三个参数：

• 成功：成功的回调函数，用于获取用户的位置
• 错误：一个错误回调函数，该函数将“位置错误”对象作为输入。
• options：定义用于获取位置的各种选项。

以下示例将返回访问者当前位置的经度和纬度。

例

  
Find your Current location
Click me

说明：

• 首先检查浏览器支持
• 使用getCurrentPosition()获取当前位置
• 使用showPosition()方法获取纬度和经度值，该方法是getCurrentPosition()的回调方法。

处理错误和拒绝：使用错误回调函数

getCurrentPosition的第二个参数是错误的回调函数。它是一个可选参数，用于在获取用户位置时处理错误和拒绝用户。

以下是调用错误回调函数的可能选项：

• 发生未知的随机错误
• 如果用户拒绝共享位置
• 位置信息不可用
• 位置请求超时。

例

function showError(error) {
         switch(error.code){
             case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation API.");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("USer location information is unavailable.");
            break;
        case error.TIMEOUT:
            alert("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.");
            break;
    }
         }

在Google地图上显示位置

到目前为止，我们已经了解了如何使用纬度和经度值显示您的位置，但这还不够。因此，我们还可以使用此API在Google地图上显示确切位置。

以下示例显示了使用Google Map的位置。

例

 
 
     
       
      
     
       
Find Your Location in below Map
 
         Show Position 
        
 
       
         
        
         
     
     

要了解有关Google Maps JavaScript API的更多信息，可以单击以下链接：

位置属性

Geolocation API的getCurrentPosition()方法返回用于检索用户位置信息的回调方法。此回调方法返回一个Position对象，该对象包含所有位置信息并指定不同的属性。它总是返回纬度和经度属性，但是下表描述了Position对象的其他一些属性。

观看当前位置：

如果我们想知道用户在移动时的位置，并希望在每个更改的位置上获得准确的位置，则可以使用watchPosition()回调函数来实现。

此函数具有getCurrentPosition()包含的所有三个参数。

句法：

  var id = navigator.geolocation.watchPosition(success[, error[, options]])

watchPosition()方法返回一个ID，该ID可用于唯一地标识用户的位置，并且该ID也可以与clearWatch()方法一起使用以停止监视位置。

句法：

    navigator.geolocation.clearWatch(id);

浏览器支持：

API	Chrome	IE	Firefox	Opera	Safari
Geolocation	5.0 – 49.0 (http) 50.0 (https)	9.0	3.5	16.0	5.0