HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息

Geolocation API使用方法:

1.判断是否支持 navigator.geolocation

2.调用getCurrentPosition(successCallback, errorCallback, options),返回定位数据

参数说明:

参数1:successCallback 成功的回调函数,把position对象作为参数传入,position对象包含定位的相关信息

latitude 纬度数值

longitude 经度数值

speed 运动的速度(假设你在地平线上运动),单位米/秒。

accuracy 精确度单位米

altitude 高度,单位米

altitudeAccuracy 高度的精确地,单位米

heading 运动的方向,相对于正北方向的角度。

参数2:errorCallback 出错的回调函数

error.PERMISSION_DENIED: 用户拒绝对获取地理位置的请求。

error.POSITION_UNAVAILABLE: 位置信息是不可用的。

error.TIMEOUT: 请求用户地理位置超时。

error.UNKNOWN_ERROR: 未知错误。

参数3:options 选项配置

enableHighAccuracy: true 指示浏览器获取高精度的位置

timeout: 5000 指定获取地理位置的超时时间,默认不限时,单位为毫秒

maximumAge: 3000 最长有效期,即位置缓存

代码示例:

//支持html5的浏览器才可以使用Geolocation API

//console.log(navigator.geolocation);

if(navigator.geolocation){

//console.log("支持!");

//参数1:

function successFn(position) {

//latitude 纬度

//longitude 经度

console.log("position",position);

console.log(position.coords);

console.log("纬度 ",position.coords.latitude,"经度 ",position.coords.longitude);

}

//参数2:

function errorFn(error) {

switch(error.code) {

case error.PERMISSION_DENIED:

console.log("用户拒绝对获取地理位置的请求User denied the request for Geolocation.");

break;

case error.POSITION_UNAVAILABLE:

console.log("位置信息是不可用Location information is unavailable.");

break;

case error.TIMEOUT:

console.log("用户的请求超时The request to get user location timed out.");

break;

case error.UNKNOWN_ERROR:

console.log("未知错误An unknown error occurred.");

break;

}

}

//参数3:

var options = {

// 指示浏览器获取高精度的位置

enableHighAccuracy: true,

// 指定获取地理位置的超时时间,默认不限时,单位为毫秒

timeout: 5000,

// 最长有效期,即位置缓存

maximumAge: 3000

}

//返回定位数据,如果出错返回错误信息,链接超时的配置

navigator.geolocation.getCurrentPosition(successFn,errorFn,options);

}

else{

console.log("不支持! Geolocation is not supported by this browser.");

}

注意:google浏览器在国内无法直接定位

html5 地理api,HTML5地理定位-Geolocation API相关推荐

  1. html浏览位置坐标,HTML5教程 | HTML5地理定位(GeoLocation API)

    HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置.由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只 ...

  2. html5 定位 计算距离,HTML5 地理定位+地图 API:计算用户到商家的距离

    背景 最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图: 支付宝口碑商家页面截图 思路分析 1.商家选取店铺地址,将坐标经纬度存入数据库: 2.移动端定位当前用 ...

  3. HTML5+百度地图API实现地理定位

    背景 如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...

  4. 计算两个经纬度的距离_HTML5 地理定位+地图 API:计算用户到商家的距离

    51CTO官微 | THEFUTURE|技术成就梦想| 最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图:支付宝口碑商家页面截图思路分析 1.商家选取店铺地址, ...

  5. geoip java api_利用GeoIP数据库及API进行地理定位查询 Java

    地理定位查询的的数据库比较多,而且大多都开放一些free的版本 国内的有纯真数据库等,但是他只提供文本的地理位置信息,不提供经纬度数据 当应用到google map时,就不可以了 国外的有MaxMin ...

  6. HTML5 Geolocation API : 实时跟踪应用

    getCurrentPosition与watchPosition watchPosition会监视你的移动,并在位置改变时向你报告位置.watchPPosition方法看上去确实与getCurrent ...

  7. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...

  8. HTML5 Geolocation API

    HTML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法. 1.getCurrent ...

  9. js 调用android定位,基于html5+ 高德地图JS API使用安卓定位sdk用来进行定位

    使用Native.js打开Android的H5辅助定位 mui.plusReady(function() { if(plus.os.name == 'Android') { var AMapLocat ...

最新文章

  1. tcpdump-根据IP查看程序与服务都用了哪些端口
  2. 三、Appium-python-UI自动化之元素定位uiautomatorviewer
  3. Python单例模式的4种实现方法
  4. python基础(十三)
  5. docker 查询或获取私有仓库(registry)中的镜像
  6. Python03 拉格朗日插值法 牛顿插值法(附代码)
  7. 为啥我从后台查到的值在页面显示的是undefined_【java笔记】046天,作购物车页面,学习JavaScript...
  8. Chapter 8 Document Management(第8章 文档管理)—1 【中英文对照】
  9. 解决Invalid `Podfile` file: no implicit conversion of nil into String
  10. mysql 网吧管理系统设计_网吧管理系统开题报告.doc
  11. 206、3分钟学会路由器的无线桥接,超实用
  12. Deepin安装到移动硬盘
  13. sql服务器显示空白,sql服务器空白
  14. 配置其他机器连接Redis
  15. 【面试题】前端人70%以上 不了解的promise/async await
  16. 主动外观模型(AAM)
  17. 谷歌学术用publish-or-perish来对引用量排序
  18. 软件工程第一次结对作业
  19. 《高级计算机网络》之无线传感网——大连理工大学研究生课程整理笔记(非常详细,通俗易懂)
  20. 彻底颠覆几句话vm_彻底颠覆Web开发:面向移动的设计

热门文章

  1. html怎么写分页ajax,js实现ajax分页完整实例
  2. 着陆攻击LAND Attack
  3. java读取pdf多表格_在Java中使用tabula提取PDF中的表格数据
  4. android拍照身份证边框,Android自定义证件拍照控件之CameraCardCrop
  5. Apache ranger 简介、原理、安装部署
  6. php redis事务,Redis中事务的使用详解
  7. 有道云笔记突然出现乱码 日记变成乱码
  8. 智赢未来:苏州金龙IT部长吴震助推ACS2017汽车信息化
  9. java开发sns游戏服务需要注意的问题
  10. 互联网公司忽悠员工的那些黑话。。。你入坑了没?