HTML5地理定位-Geolocation API
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的更多相关文章
- 基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- HTML5地理定位(已知经纬度,计算两个坐标点之间的距离)
事实上,地球上任意两个坐标点在地平线上的距离并不是直线,而是球面的弧线. 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离.半正矢公式也成为Haversine公式,它最早时航海学中的重 ...
- Xamarin Essentials教程地理定位Geolocation
Xamarin Essentials教程地理定位Geolocation 通过地理定位功能,应用程序可以获取用户的当前地理位置,如经纬度值.利用地理位置,可以在地图上定位,也可以转化物理位置,划分用 ...
- HTML5地理定位,百度地图API,知识点熟悉
推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) { alert('支持地理定位'); } e ...
- 小强的HTML5移动开发之路(18)——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- HTML5 — 地理定位
Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订 餐 ...
- 手机端网页使用html5地理定位获取位置失败的解决办法
网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...
- 第182天:HTML5——地理定位
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支 ...
- HTML5地理定位API在chrome中不能正常使用
navigator.geolocation.getCurrentPosition在chrome中不能正常使用. 经测试发现,FQ后就能正常使用,估计是因为chrome 对这个API的实现使用了goog ...
随机推荐
- vue2.0构建单页应用最佳实战
链接: https://www.tuicool.com/articles/me6RJfF
- bzoj 3714: [PA2014]Kuglarz【最小生成树】
参考:https://blog.csdn.net/aarongzk/article/details/48883741 没想到吧.jpg 来自题解: "如果用sum[i]表示前i个杯子底球的总 ...
- Luogu P1119 灾后重建 【floyd】By cellur925
题目传送门 这道题我们很容易想到对于每次询问,都跑一遍最短路(spfa,虽然他已经死了).只需在松弛的时候加入当前相关的点是否已经修好的判断,果不其然的TLE了4个点. (然鹅我第一次用spfa跑的时 ...
- Six degrees of Kevin Bacon
转自:https://blog.csdn.net/a17865569022/article/details/78766867 Input* Line 1: Two space-separated in ...
- python网络爬虫之四简单爬取豆瓣图书项目
一.爬虫项目一: 豆瓣图书网站图书的爬取: import requests import re content = requests.get("https://book.douban.com ...
- Android上的进程通信(IPC)机制
Interprocess Communication Android offers a mechanism for interprocess communication (IPC) using rem ...
- lavas安装
最近在研究pwa,百度基于此写了一套开源框架lavas,学习下: 1.环境准备: lavas 安装.git安装 Node.js:https://nodejs.org/ Git:https://git- ...
- 在面试官问你BS和CS区别的时候如何回答??
这是我下来整理好的,如果哪里不全,望大家多多指教 C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.Inform ...
- 455 Assign Cookies 分发饼干
假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干.对每个孩子 i ,都有一个胃口值 gi ,这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 j ,都有一个尺寸 ...
- js拿到焦点所在的标签对象
通过 document.activeElement 此时是js对象,如果要调用jQuery的API那么就转换成jquery对象 $(document.activeElement)