首页 前端知识 无涯教程-HTML5 - 地理定位

无涯教程-HTML5 - 地理定位

2024-08-12 10:08:23 前端知识 前端哥 116 602 我要收藏

HTML5 Geolocation API可以捕获您的经度和纬度,并且可以发送到后端Web服务器,并执行精确的位置感知函数,如查找本地商家或在Map上显示您的位置。

今天,大多数浏览器和移动设备都支持Geolocation API,地理位置API使用全局导航器对象的新属性,可以按以下方式创建的地理位置对象-

var geolocation=navigator.geolocation;

地理位置对象是一个服务对象,它允许小部件检索有关设备地理位置的信息。

Geolocation 方法

地理位置对象提供以下方法-

Sr.No.Method & Remark
1 getCurrentPosition()

此方法检索用户的当前地理位置。

2 watchPosition()

此方法检索有关设备当前地理位置的定期更新。

3 clearWatch()

此方法取消正在进行的watchPosition调用。

以下是使用上述任何方法的示例代码-

function getLocation() {
   var geolocation=navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

这里的showLocation和errorHandler是回调方法,将用于获取实际位置(如下一节所述)并处理错误(如果有)。

Location 属性

地理定位方法getCurrentPosition()和getPositionUsingMethodName()指定用于检索位置信息的回调方法。这些方法与对象 Position 异步调用,该对象存储完整的位置信息。

Position 对象指定设备的当前地理位置。

下表描述了Position对象的属性。对于系统无法提供值的可选属性,该属性的值设置为null。

属性类型说明
coords Object指定设备的地理位置。该位置表示为一组地理坐标以及有关航向和速度的信息。
coords.latitudeNumber以十进制度数指定纬度估计。值范围是[-90.00,+90.00]。
coords.longitudeNumber以十进制度度指定经度估计。值范围是[-180.00,+180.00]。
coords.altitudeNumber [可选]以WGS 84椭球上方的米为单位指定海拔高度估算值。
coords.accuracyNumber [可选]指定以米为单位的纬度和经度估计的准确性。
coords.altitudeAccuracyNumber [可选]以米为单位指定海拔高度估计的准确性。
coords.headingNumber [可选]指定设备当前的移动方向,以相对于真北的顺时针方向计数。
coords.speedNumber [可选]以秒/米为单位指定设备的当前地面速度。
timestampdate指定检索位置信息和创建Position对象的时间。

以下是使用Position对象的示例代码。这里的showLocation方法是一个回调方法-

function showLocation( position ) {
   var latitude=position.coords.latitude;
   var longitude=position.coords.longitude;
   ...
}

处理错误

地理位置很复杂,非常需要捕获任何错误并妥善处理。

地理位置方法getCurrentPosition()和watchPosition()使用了错误处理程序回调方法,该方法提供了 PositionError 对象。该对象具有以下两个属性-

属性类型说明
codeNumber包含错误的数字代码。
messageString包含该错误的易于理解的描述。

下表描述了PositionError对象中返回的可能的错误代码。

代码常量说明
0 UNKNOWN_ERROR由于未知错误,该方法无法检索设备的位置。
1 PERMISSION_DENIED该方法无法检索设备的位置,因为该应用程序无权使用位置服务。
2 POSITION_UNAVAILABLE无法确定设备的位置。
3TIMEOUT该方法无法在指定的最大超时间隔内检索位置信息。

以下是使用PositionError对象的示例代码。这里errorHandler方法是一个回调方法-

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      //access is denied
   }
   ...
}

位置选项

以下是getCurrentPosition方法的实际语法-

getCurrentPosition(callback, ErrorCallback, options)

这里的第三个参数是 PositionOptions 对象,该对象指定一组用于检索设备地理位置的选项。

以下是可以指定为第三个参数的选项-

属性类型说明
enableHighAccuracyBoolean指定小部件是否希望接收可能最准确的位置估计。默认情况下为false。
timeoutNumber timeout属性是Web应用程序愿意等待位置的毫秒数。
maximumAgeNumber以毫秒为单位指定缓存的位置信息的到期时间。

以下是示例代码,显示了如何使用上述方法-

function getLocation() {
   var geolocation=navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

HTML5 - 地理定位 - 无涯教程网无涯教程网提供HTML5 Geolocation API可以捕获您的经度和纬度,并且可以发送到后端Web服务器,并执行...https://www.learnfk.com/html5/html5-geolocation.html

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15336.html
标签
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!