一、简介

　　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的更多相关文章

  1. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

  2. JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  3. JS新API标准 地理定位（navigator.geolocation）

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  4. js地理定位对象 navigator.geolocation

    浏览器信息的存储对象(navigator): 在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息 ...

  5. 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位

    昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...

  6. 完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  7. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

  8. navigator.geolocation例子

    navigator.geolocation例子 <html> <head> <script type="text/javascript"> fu ...

  9. 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题

    昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...

随机推荐

  1. 通过代码来执行testng.xml

    大多数时候,我们都是通过Eclipse IDE上的操作命令来执行testng 框架下的case 运行.那如果我们不想通过这种方式,而是想通过代码调用来实现执行该怎么办?下面是我搜集的两种方式供大家参考 ...

  2. ng-select ng-options ng-repeat的用法与区别

    最近在用angularJS里的ng-select,ng-options,ng-repeat,发现有两点不太方便: 1.当数据复杂时,循环起来比较麻烦 2.首选项如果不设置,就会为空 整理一下它们的用法 ...

  3. bzoj 2741 分块+可持久化trie

    多个询问l,r,求所有子区间异或和中最大是多少 强制在线 做法: 分块+可持久化trie 1.对于每块的左端点i,预处理出i到任意一个j,()i,j)间所有子区间异或和中最大为多少,复杂度O(\(n\ ...

  4. 53个要点提高php效率

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中说 ...

  5. UVaLive6039 Uva1668 Let's Go Green

    一开始考虑所有边都是单独的一条路径 然后尽量多的合并 #include<cstdio> #include<cstring> #include<cstdlib> #i ...

  6. app启动其他应用

    因开发需要内包一个app,所以要启动一个app,这种操作 如果知道包名和类名 其实很简单 只需要将包名内嵌即可(一般情况 我们都可以解压或者反接拿到) 代码如下: Intent intent = ne ...

  7. IAAS云计算产品畅想-云主机产品内涵

    这里所涉及的主要还是狭义的云主机产品. 主要还是谈云主机产品中公有云产品与私有云产品相比赋予更多的含义: 产品广义理解:公有云主机的最大特点就是基础资源按需支付 从这一句话中可以体现出来两个含义: 产 ...

  8. docker 镜像和容器的批量清理

    镜像和容器的清理 删除所有运行中的容器 $ docker kill $(docker ps -q) 删除所有停止的容器 $ docker rm $(docker ps -a -q) 删除所有没有tag ...

  9. 原创翻译：蓝牙（BLE）for iOS

    About Core Bluetooth 简要:核心蓝牙框架提供了iOS和MAC 应用程序与BLE 设备进行无线通信所需要的类.通过该框架,应用程序可以扫描.发现BLE 外设,如心率.电子温度传感器等 ...

  10. mvc Action上面加 [HttpPost]

    mvc  Action上面加 [HttpPost]  意思就是这个action只能响应post请求. 如果发get请求这里是没有响应的