好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

js地理定位navigator.geolocation使用样例解析

js有一个定位的API:navigator.geolocation,获取设备的经度纬度高度速度等信息。网线上网通过IP获取,非常不准确,移动设备可能根据三角基站位置判断,不算很精确,平板等通过WIFI则相对准确一些,手机等根据GPS最为准确,因此定位API在移动设备上使用最为广泛。


先自己试试样例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Where am I?</title>
<script type="text/javascript" >
window.onload=getMyLocation;

function getMyLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(displayLocation,displayError);
	} else {
		alert("Oops, no geolocation support");
	}
}

function displayLocation(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;

	var div = document.getElementById("location");
	div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}

function displayError(error) {
	var errorTypes = {
		0: "Unknown error",
		1: "Permission denied by user",
		2: "Position is not available",
		3: "Request timed out"
	};
	var errorMessage = errorTypes[error.code];
	if (error.code == 0 || error.code == 1 || error.code == 2) {
		errorMessage = errorMessage + " " + error.message;
	}
	var div = document.getElementById("location");
	div.innerHTML = errorMessage;
}
</script>
</head>
<body>
<div id="location">
Your location will go here.
</div>
</body>
</html>

navigator.geolocation的三个方法:

  1. getCurrentPosition()

  2. watchPosition()

  3. clearWatch()

getCurrentPosition()

使用方法:

navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
successCallback 

获取定位成功时执行的回调函数,可以直接调用时定义如下例或者使用函数名调用如上例。

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:以米每秒为单位的设备的当前对地速度

另外firefox下还有address属性,可以获取详细地址,但准确度较差,使用方法:position.address.city。

errorCallback 

定位失败时执行的回调函数,使用方法同successCallback:

function(error){alert(error.message);}

errorCallback返回一个错误数据对象error作为参数,该对象有属性:

  1. code :表示失败原因,返回1 or 2 or 3 ,具体为

    PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API

    POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置

    TIMEOUT (数值为3) 表示超时

  2. message :错误提示内容 

positionOptions 

用来设置positionOptions来更精细的执行定位,positionOptions拥有三个属性{enableHighAccuracy:boolean , timeout:long , maximumAge:long}。

  1. enableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构,默认为false不启用,选择true则启用,但是会导致较长的响应时间及增加功耗,这种情况更多的用在移动设备上。

  2. timeout 设备位置获取操作的超时时间设定(不包括获取用户权限时间),单位为毫秒,如果在设定的timeout时间内未能获取位置定位,则会执行errorCallback()返回code(3)。如果未设定timeout,那么timeout默认为无穷大,如果timeout为负数,则默认timeout为0。

  3. 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。


本文由小指整理编辑于互联网~

点赞0
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘