Position API接口

注意:由于geolocation的位置信息来源包括GPS,IP地址,wifi,蓝牙的MAC地址GSM/CDMA 卡 ID 等。移动设备优先使用GPS获取位置,但是对于wifi和IP定位,浏览器本身不能直接解析,它只能手机wifi和ip的信息,然后通过请求位置信息服务接口来获取,然后主流浏览器都是使用Google提供的地理位置查询服务。通过抓包我们可以知道浏览器会请求www.googleapis.com来获取位置信息,那么问题来了,谷歌撤出中国以后,很多Google提供的服务我们无法使用,其中就包括了地理位置查询服务,悲剧!

不过我们还是有必要来学习一下这个最受开发者青睐的API。

方法1:getCurrentPosition() 获取用户当前的位置信息,有三个参数,1.成功后的回调函数,2.失败后的回调函数,3,设置参数的对象。

方法2:watchCurrentPostion() 获取用户的位置信息,并继续返回用户移动时的更新位置,函数会返回一个 ID,唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

方法3:clearWatch(id) 取消watchCurrentPostion,参数为watchID。

getCurrentPosition()使用案例

if(navigator.geolocation){

//可用

//设置配置参数

getLocationOptions = {

// 指示浏览器获取高精度的位置,默认为false

enbaleHighAcuracy:true,

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

timeout:5000,

// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。

maximumAge:300

};

navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,getLocationOptions);

}

else{

//不可用

alert('你的浏览器不支持geolocation API的使用');

}

//成功后返回对象,包含位置信息

function getLocationSuccess(position){

console.log('纬度:'+position.coords.latitude);

console.log('经度:'+position.coords.longitude);

console.log('位置精度:'+position.coords.accuracy);

console.log('海拔:'+position.coords.altitude);

console.log('海拔精度:'+position.coords.altitudeAccuracy);

console.log('方向(正北开始以度计):'+position.coords.heading);

console.log('速度,以米/每秒计'+position.coords.speed);

console.log('响应的日期/时间'+position.timestamp);

}

//失败后返回对象,包含失败信息

function getLocationError(error){

switch (error.code){

case error.PERMISSION_DENIED : alert('用户拒绝浏览器获取位置信息');break;

case error.TIMEOUT : alert('请求超时!'); break;

case error.POSITION_UNAVAILABLE : alert('无法检测到你的位置'); break;

}

}

watchCurrentPostion()使用案例

var watchID = navigator.geolocation.watchPosition(function(position) { /*.....*/});

clearWatch(id)使用案例

navigator.geolocation.clearWatch(watchID);

最悲剧的HTML5 API : Position地理位置相关推荐

  1. 最实用的18个HTML5 API 教程大全,都在这里了

    HTML5是web前端开发者必备的能力之一,公众号之前已经给同学们带来很多相关的教程,现在小编在这里将所有的API教程进行一次汇总,方便同学们学习. API详解1:实现fullscreen全屏模式 A ...

  2. html5实现获取地理位置信息并定位

    html5实现获取地理位置信息并定位 一.总结 一句话总结:获取地理位置是分两步:获取经纬度和根据经纬度获取地址信息 a.HTML5的Geolocation(地理位置功能(Geolocation AP ...

  3. html5中获取地理位置信息

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...

  4. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

  5. c语言api获取百度地图,H5调用百度地图API获取地理位置

    //获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...

  6. HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用

    HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...

  7. html5扫码plusready子添加剂,关于HTML5+ API plusready的兼容问题

    这篇文章主要介绍了HTML5+ API plusready的兼容问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 Android平台提前注入5+ API, ...

  8. html5扫码plusready子添加剂,HTML5+ API plusready兼容相关问题

    这篇文章主要介绍了HTML5+ API plusready的兼容问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 Android平台提前注入5+ API, ...

  9. html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能

    如何使用html5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

最新文章

  1. 数据仓库与联机分析处理
  2. 操作dict时避免出现KeyError的几种方法
  3. 深入解读EOS源代码之——区块链内核
  4. 5如何让进行项目管理
  5. [转]Windows Shell编程 第十五章【来源:http://blog.csdn.net/wangqiulin123456/article/details/7988016】...
  6. alter procedure是什么意思_板上钉钉的意思
  7. 安装Flutter环境
  8. 大数据应用的优势在哪
  9. 阿里P7的大数据简历,牛逼!
  10. 迭代重心法 matlab,重心法
  11. org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.itheima.
  12. 古诗词取名小工具1.0
  13. python 跳过_如果文件已经存在,Python将跳过一个函数
  14. UWB,可以应用到生活中的方方面面
  15. iPhone SDK 包含哪些东西?
  16. UI自动化执行遇到的问题汇总
  17. 女人嫁错人,但又离不了婚,过来人告诉你该怎么办
  18. mac聚焦搜索Spotlight怎么用
  19. 电子尺子怎么在线测量?几个步骤轻松测量
  20. Cxcore绘图函数

热门文章

  1. 2020年线上农产品消费趋势报告
  2. 拓展 欧几里得算法 求逆元_ECC椭圆曲线加密算法:有限域和离散对数
  3. centos6安装mysql并远程连接_阿里云服务器上安装redis并实现远程连接
  4. 【2016年第6期】产业生态的4个特征
  5. 作者:张飞波,华侨大学信息管理系本科在读。
  6. 【软件测试】软件测试札记
  7. 【软件工程】计算资源
  8. PBFT 算法原理简介
  9. html5-css的使用强制优先级
  10. java 原子量Atomic举例(AtomicReference)