js定位navigator.geolocation
一、简介
html5为window.navigator提供了geolocation属性，用于获取基于浏览器的当前用户地理位置。
window.navigator.geolocation提供了3个方法分别是：
void getCurrentPosition(onSuccess,onError,options);
//获取用户当前位置 int watchCurrentPosition(onSuccess,onError,options);
//持续获取当前用户位置 void clearWatch(watchId);
//watchId 为watchCurrentPosition返回的值
//取消监控 options = {
enableHighAccuracy,//boolean 是否要求高精度的地理信息
timeout,//获取信息的超时限制
maximumAge//对地理信息进行缓存的时间
}
//options可以不写，为默认即可
二、position对象
当成功获取地理位置信息时候，onsuccess方法中会返回position对象，通过这个对象可以获取地理位置的相关信息，包括：
position对象的属性：
latitude,//纬度
longitude,//经度
altitude,//海拔高度
accuracy,//获取纬度或者经度的精度
altitudeAccurancy,//海拔高度的精度
heading,//设备前景方向。正北方向的顺时针旋转角
speed,//设备的前进速度 m/s
timestamp,//获取地理位置信息时候的时间
三、基于google map的例子
直接看代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在页面上使用google地图示例</title>
</head>
<body onload = 'init()'>
<div id="map" style='width:800px;height:800px;'></div>
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type="text/javascript">
function init(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
var coords = pos.coords;
var latlng =new google.maps.LatLng(coords.latitude,coords.longitude);
var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP};
var map1;
map1 =new google.maps.Map(document.getElementById('map'),options);
var marker =new google.maps.Marker({
position : latlng,
map : map1
});
var infowindow =new google.maps.InfoWindow({
content : '当前位置！'
});
infowindow.open(map1,marker);
});
}
}
</script>
</body>
</html>
另附：
getCurrentPosition()
使用方法：navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
A) successCallback 获取定位成功时执行的回调函数 eg: function(position){alert("纬度："+position.coords.latitude+"；经度："+position.coords.longitude)};
successCallback返回一个地理数据对象position作为参数，该对象有属性timestamp和coords。timestamp表示该地理数据创建时间（时间戳）；coords包括另外七个属性：
1. coords.latitude：估计纬度
2. coords.longitude：估计经度
3. coords.altitude：估计高度
4. coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度
5. coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度
6. coords.heading： 宿主设备当前移动的角度方向，相对于正北方向顺时针计算
7. coords.speed：以米每秒为单位的设备的当前对地速度
B) errorCallback 定位失败时执行的回调函数 eg: function(error){alert(error.message);}
errorCallback返回一个错误数据对象error作为参数，该对象有属性：
1.code :表示失败原因，返回1 or 2 or 3 ，具体为
PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API
POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置，例如一个或多个的用于定位采集程序报告了一个内部错误导致了全部过程的失败
TIMEOUT (数值为3) 表示超时
详情查看 http://dev.w3.org/geo/api/spec-source.html#permission_denied_error
2.message :错误提示内容
C) positionOptions 用来设置positionOptions来更精细的执行定位，positionOptions拥有三个属性 {enableHighAccuracy:boolean , timeout:long , maximumAge:long}。
enableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构，默认为false不启用，选择true则启用，但是会导致较长的响应时间及增加功耗，这种情况更多的用在移动设备上。
timeout 设备位置获取操作的超时时间设定（不包括获取用户权限时间），单位为毫秒，如果在设定的timeout时间内未能获取位置定位，则会执行 errorCallback()返回code（3）。如果未设定timeout，那么timeout默认为无穷大，如果timeout为负数，则默认 timeout为0。
maximumAge 设定位置缓存时间，以毫秒为单位，如果不设置该值，该值默认为0，如果设定负数，则默认为0。该值为0时，位置定位时会重新获取一个新的位置对象；该值大 于0时，即从上一次获取位置时开始，缓存位置对象，如果再次获取位置时间不超过maximumAge，则返回缓存中的位置，如果超出 maximumAge，则重新获取一个新的位置。
watchPosition()
功能getCurrentPosition()相似，watchPosition()是定期轮询设备的位置，同样拥有3个参数，与getCurrentPosition()相同。
使用方法：navigator.geolocation.watchPosition(successCallback, [errorCallback] , [positionOptions]);
执行步骤：
1.首先初始化positionOptions内的属性（详细同上）。
2.判断是否有缓存位置对象，该对象年龄是否可用、是否超出maximumAge ，如果可用且未超出，返回缓存位置，否则重新确定设备位置。
3.位置定位操作：
i.建立一个计时器，进行位置获取操作，如果在timeout之前完成，执行下一步；如果未在timeout之前完成，则执行errorCallback()，code为3，跳出步骤做等待重新激活。
ii.如果在timeout之前获得位置成功，则执行successCallback()，然后重置计时器（从获取位置成功时刻重新算起），继 续挂起获取新位置。当有与之前位置有明显不同位置出现时，再次执行successCallback()，并重复操作，该循环直到timeout超时或者获 取操作中遇到POSITION_UNAVAILABLE错误执行errorCallback()为止，亦或者执行clearWatch()操作。
clearWatch()
配合watchPosition()使用，用于停止watchPosition()轮询。
watchPosition()需要定义一个watchID，var watchID = watchPosition(...)，通过clearWatch(watchID)来停止watchPosition()，使用方法类似setInterval。
js定位navigator.geolocation的更多相关文章
- HTML5浏览器定位navigator.geolocation.getCurrentPosition
<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...
- JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- JS新API标准 地理定位（navigator.geolocation）
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- js地理定位对象 navigator.geolocation
浏览器信息的存储对象(navigator): 在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息 ...
- 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位
昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...
- 完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题
目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...
- 使用navigator.geolocation来获取用户的地理位置信息
使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...
- navigator.geolocation例子
navigator.geolocation例子 <html> <head> <script type="text/javascript"> fu ...
- 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题
昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...
随机推荐
- Sorting Algorithm
sorting 应该是最容易被考到的东西,自己老是学了背,背了忘.为了方便复习,这里进行总结 1. Bubble Sort 定义:每两个两个比较,每扫完一次,当前扫过的最大值放在了末尾. for i ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
- Just a Hook
Just a Hook 题目大意:原来有N个铜棍, 一个人有种能力可以把一个区间的棍变成铜,银或者金的,价值分别是1,2,3, 最后求出总价值,没啥好说的,赤裸裸的线段树: Time Limit ...
- C#中HashTable的用法示例1
一,哈希表(Hashtable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似keyvalue的键值对,其中 ...
- C++ 标准时间线
Herb Sutter在他的博客上贴出了一个C++的timeline,如下所示:
- Windows版本搭建安装React Native环境配置及相关问题
此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...
- Bash简单介绍
Bash不不过一个命令解析程序. 它本身拥有一种程序设计语言,使用这样的语言,能够编写shell脚本来完毕各种各样的工作.而这些工作是使用现成的命令所无法完毕的.Bash脚本能够使用if-then-e ...
- (hdu step 6.3.1)Strategic Game(求用最少顶点数把全部边都覆盖，使用的是邻接表)
题目: Strategic Game Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- js获取键盘的keyCode-------Day42
济南今天是大雨倾盆啊,这闷热一扫而空,只是有些电闪雷鸣的,原想在公司里就完毕今天的博客记录的,只是不知道为什么怎么也登不上博客,预计是CSDN当时的server出问题了吧,好在到了晚上,这雷声小了也少 ...
- Android 仿网易新闻v3.5:上下滑动的引导页
版权声明:本文为博主原创文章,未经博主允许不得转载. 在很多天气或者新闻的应用中,我们都能看到一些字幕滚动的效果,最简单的实现为跑马灯效果,用系统提供的属性即可实现. 复杂一些的就需要自己去用自定义控 ...