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 最长有效期,即位置缓存

代码示例:


<script type="text/javascript">
//支持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.");
}
</script>

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

原文地址:https://segmentfault.com/a/1190000014939935

HTML5地理定位-Geolocation API的更多相关文章

  1. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  2. HTML5地理定位(已知经纬度,计算两个坐标点之间的距离)

    事实上,地球上任意两个坐标点在地平线上的距离并不是直线,而是球面的弧线. 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离.半正矢公式也成为Haversine公式,它最早时航海学中的重 ...

  3. Xamarin Essentials教程地理定位Geolocation

    Xamarin Essentials教程地理定位Geolocation   通过地理定位功能,应用程序可以获取用户的当前地理位置,如经纬度值.利用地理位置,可以在地图上定位,也可以转化物理位置,划分用 ...

  4. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  5. 小强的HTML5移动开发之路(18)——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  6. HTML5 — 地理定位

    Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订   餐 ...

  7. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  8. 第182天:HTML5——地理定位

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支 ...

  9. HTML5地理定位API在chrome中不能正常使用

    navigator.geolocation.getCurrentPosition在chrome中不能正常使用. 经测试发现,FQ后就能正常使用,估计是因为chrome 对这个API的实现使用了goog ...

随机推荐

  1. Activiti6.0教程 28张表解析 (三)

    使用Activit的朋友都知道Activiti对应的有28张表,今天我们就来说下Activit中28张表对应的含义是什么? 如何创建表? 在Activiti中创建表有三种方式,我们依次来看下: 一.通 ...

  2. POJ 2833 The Average(优先队列)

    原题目网址:http://poj.org/problem?id=2833 本题中文翻译: 描述 在演讲比赛中,当选手完成演讲时,评委将对他的演出进行评分. 工作人员删除最高成绩和最低成绩,并计算其余成 ...

  3. Spring Json数据

    json 数据转换 @RequestBody 用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter 进行解析,然后把相应的数据绑定到Controll ...

  4. 牛客小白月赛5-J-时间(time) (简单模拟)

    题目描述 Apojacsleam是一个喜欢特殊时刻的人. 他定义了一个时刻,若电子表显示ab:ba(24小时制),则该时刻为“回文时刻”(可以有前导零).例如00:00就是回文时刻. 给定一个时刻,求 ...

  5. Linux的proc文件系统 分类: linux 2014-06-02 10:21 623人阅读 评论(0) 收藏

    proc为一个内核数据结构接口,用户空间和内核空间可以通过该接口通信, 与普通文件不同的是,这些虚拟文件的内容都是动态创建的. proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间. ...

  6. overlaps the location of another project Zendstudio导入已经存在的目录

    转 http://blog.csdn.net/kdchxue/article/details/50633745 最近弄zendstuido导入已经存在的项目,找了很多地方终于找到了导入的方法,特别记录 ...

  7. 467 Unique Substrings in Wraparound String 封装字符串中的独特子字符串

    详见:https://leetcode.com/problems/unique-substrings-in-wraparound-string/description/ C++: class Solu ...

  8. [转]linq to sql (Group By/Having/Count/Sum/Min/Max/Avg操作符)

    本文转自:http://www.cnblogs.com/jack-liang/archive/2011/03/22/1991554.html Group By/Having操作符 适用场景:分组数据, ...

  9. 通过 DBCA 工具创建Oracle数据库

    DBCA 是 Oracle 提供的一款图形化界面工具,用来帮助数据库管理员快速.直观地创建数据库,避免了繁琐复杂的 SQL命令操作. 使用 DBCA创建数据库的过程如下. (1)依次 单击“开始 ”→ ...

  10. 函数的返回值return

    '''1.什么是返回值 返回值是一个函数的处理结果 2.为什么要有返回值 如果我们需要在程序中拿到函数的处理结果做进一步的处理,则需要函数必须有返回值 3.函数的返回值的应用 函数的返回值用retur ...