📜  HTML 地理位置

📅  最后修改于: 2020-11-01 08:59:31             🧑  作者: Mango

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接口方法:

Methods Description
getCurrentPosition() It identifies the device or the user’s current location and returns a position object with data.
watchPosition() Return a value whenever the device location changes.
clearWatch() It cancels the previous watchPosition() call

检查浏览器支持:

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

 


    Geolocation API


  

Find your Current location

获取用户的当前位置:

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

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

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




Geolocation API


  

Find your Current location

说明:

  • 首先检查浏览器支持
  • 使用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的位置。

 
 
     
      Geolocation API 
      
     
       

Find Your Location in below Map

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

位置属性

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

Properties Description
coords.latitude It returns latitude of user location as a decimal number.
coords.longitude It returns longitude of user location as a decimal number.
coords.altitude It returns altitude in meters above the sea level (Only if available).
coords.accuracy It returns the accuracy of the user’s position.
coords.altitudeAccuracy It returns the altitude accuracy of user location. (If available)
coords.heading It returns headings as degree clockwise from North. (If available)
coords.speed It returns the speed in meter per seconds. (If available).
timestamp It returns data or time of response. (If available).

观看当前位置:

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

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

句法:

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

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

句法:

    navigator.geolocation.clearWatch(id);

浏览器支持:

API chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
Geolocation 5.0 – 49.0 (http)
50.0 (https)
9.0 3.5 16.0 5.0