HTML5 Geolocation位置信息定位总结
现在定位功能很常用，所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。HTML5 Geolocation的定位用法很简单，首先请求位置信息，用户同意，则返回位置信息。HTML5 Geolocation仅仅是用来检索定位信息的API，至于底层是如何定位的他也不知道，他就相当于一个传信的，你说是1，ok，那我就给用户传个1，仅此而已。
1).位置信息来源的分类和特点
1.IP定位
优点：任何地方都可以。
在服务器端处理。
缺点：不准确，只能精确到市级。
2.GPS定位
优点：比较准确。
缺点：定位时间长。
室内效果不好。
需要硬件设备支持。
3.Wi-Fi定位
优点：精确。
简单快捷。
可在室内定位。
缺点：适合大城市，对于乡村无接入点的地区几乎用不了。
4.手机定位
优点：非常精确。
可在室内使用。
简单快捷。
缺点：在没有基站的地方几乎用不了。
5.自定义定位
优点：可以获取比程序定位服务更准确的位置数据。
允许地理定位服务的结果作为备用位置信息。
用户自行输入可能比自动检测更快。
缺点：可能不准确，特别是当用户的位置改变的时候。
2)Geolocation AIP的使用
1.检测浏览器的支持性。
在HTML5中，通过window.navigator对象下新增geolocation属性来判断浏览器的兼容性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function geolocationSupport()
{
if(!navigator.geolocation)
{
alert('当前浏览器不支持HTML5 Geolocation')
}
else
{
alert('当前浏览器支持HTML5 Geolocation')
}
}
geolocationSupport();
</script>
</body>
</html>
2.获取当前地理位置
我们使用getCurrentPosition(success(position),error(err),options)方法来获取当前用户的地理位置。
success(position)回调函数是在获取到地理信息时调用的，其中的position参数是一个对象包括: latitude(纬度)
longitude(经度)
altitude(海拔高度)
accuracy(纬度和经度的精度，以米为单位)
latitudeAccuracy(海拔高度的精度，以米为单位)
heading(设备的前进方向),speed(设备的前进速度以单位m/s)
timestamp(获取位置的时间)。
error(err)回电函数是在获取地理位置失败时调用的，其中err参数有俩个属性：code和message，code{1:表示用户拒绝了定位服务,2:获取不到位置信息,3:获取信息超时错误}，message是字符串，表示错误信息。
opations是一些可选属性的列表包括: enableHighAccuracy(是否要求高精度的地理位置信息),值为true或false。
timeout(对地理信息获取操作做一个超时限制，如果超时，则返回错误)，值为数字，单位为毫秒。
maximumAge(对地理位置信息进行缓存的有效时间做一个限制)，值为数字，单位为毫秒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function geolocationSupport()
{
if(!navigator.geolocation)
{
alert("你的浏览器不支持HTML5 Geolocation");
}
else
{
getCurrentPosition();
}
}
function getCurrentPosition(){
var options={
enableHighAccuracy:true,
timeout:60000,
maximumAge:60000
}
navigator.geolocation.getCurrentPosition(success,error,options)
}
function success(position)
{
var x=position.coords.longitude;
var y=position.coords.latitude;
alert("经度为:"+x+"纬度为:"+y);
}
function error(err)
{
var errorTypes={
1:"用户拒绝定位服务",
2:"获取不到定位信息",
3:"获取定位信息超时"
}
alert(errorTypes[err.code]);
}
window.onload=geolocationSupport();
</script>
</body>
</html>
下面给大家分享一个在PC端可以显示定位地图的代码：
<!DOCTYPE html>
<html>
<title>HTML5调用百度地图API进行地理定位实例</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html> <script type="text/javascript"> window.onload = function() {
var x,y;
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
// 百度地图API功能
var map = new BMap.Map("container");
var point = new BMap.Point(x,y);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
return;
}
};
</script>
最后再说一下watchPosition和clearPosition，用于地理位置监听和清除监听，watchPosition的用法和getCurrentPosition相同，而且watchPosition与clearPosition的关系和setInterval与clearInterval一样的用法，所以不多说了。
HTML5 Geolocation位置信息定位总结的更多相关文章
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- HTML5 Geolocation API地理定位整理（二）
Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...
- HTML5 Geolocation API地理定位整理（一）
HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...
- HTML5: HTML5 Geolocation（地理定位）
ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...
- HTML5+规范：Geolocation(管理设备位置信息) 定位
Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在 ...
- HTML5 Geolocation（地理定位）
一.背景 在HTML规范中,增加了获取用户地理信息的API,这样使得可以基于用户位置开发互联网应用,即基于位置服务 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. Inter ...
- html5获取位置信息,h5获取位置信息
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...
- HTML5 学习06——Geolocation（地理定位）
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...
随机推荐
- C++分享笔记：5X5单词字谜游戏设计
笔者在大学二年级刚学完C++程序设计后,做过一次课程设计,题目是:5X5单词字谜游戏设计.为了设计算法并编写程序,笔者在当时颇费了一番心力,最后还是成功地完成了.设计中不乏有精妙之处.该程序设计完全是 ...
- 关于linux‘RedHat6.9在VMware虚拟机中的安装步骤
redhat支持多种安装方式:光盘安装,硬盘安装和网络安装等,可以根据个人的实际情况来选择.我在这里选择的是光盘安装的方式安装RHEL6.9.(以下简称6.9) 1.首先准备好6.9的光盘镜像,在安装 ...
- 简单json---转树形json
var data = [ {"fileName":"navone","layFilterId":"layadmin-system- ...
- Spring Security学习笔记（一）
认证和权限控制 AuthenticationManager是认证的主要接口,它只有一个authenticate方法,可以做3件事情. 返回一个认证信息(Authentication),表示认证成功 抛 ...
- STM32（10）——窗口看门狗
简介: 窗口看门狗(WWDG)通常被用来监测由外部干扰或不可预见的逻辑条件造成的应用程序背离正常的运行序列而产生的软件故障.除非递减计数器的值在 T6 位 (WWDG->CR 的第六位)变成 0 ...
- robotframework+appium，数字键盘输入问题，keycode，press keycode
需要注意事项 appium自带的输入法应该是无法模拟控制键和基本键的,需要自行使用adb切换成搜狗或者android输入法,然后case完成之后记得切回appium输入法 appium模拟发送基本键命 ...
- python教程（二）·变量
什么是变量?在百度百科中,变量的解释是: 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过-- 这是一段很长很长的解释,其实,作者认为没必要这么机械式的去理解.简单说,变量 ...
- 《TCP/IP详解 卷1：协议》系列分享专栏
<TCP/IP详解卷1:协议>是一本详细的TCP/IP协议指南,计算机网络历久不衰的经典著作之一. 作者理论联系实际,使读者可以轻松掌握TCP/IP的知识.阅读对象为计算机专业学生.教师以 ...
- macos 安装 brew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ...
- mRNA翻译成蛋白
dna = "ATGCACGTGCGCTCACTGCGAGCTGCGGCGCCGCACAGCTTCGTGGCGCTCTGGGCACCCCTGTTCCTGCTGCGCTCCGCCCTGGCCG ...