好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

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

清空信息
关闭评论
pdxwoof
 pdxwoof 约 14 小时前回复
#120
<a href="http://www.hitsturbines.com/orange-blue-mens-adidas-ace-soccer-shoes-sneakerd">orange blue mens adidas ace soccer shoes</a> <a href="http://www.jadamsrealtor.com/billig-adidas-tubular-shadow-kvinners-gr%C3%A5-shoesf">billig adidas tubular shadow kvinners gr氓</a> <a href="http://www.rfsloan.com/ray-ban-rb3016-clubmaster-sunglasses-mock-tortoise-arista-frame-sunglassesr">ray ban rb3016 clubmaster sunglasses mock tortoise arista frame</a>
pdxwoof http://www.pdxwoof.com/
msignworx
 msignworx 2019-03-19 12:02回复
#119
<a href="http://www.rcrocs.com/nike-free-run-5.0-v4-menn-bling-gr%C3%B8nn-svart-obuvk">nike free run 5.0 v4 menn bling gr酶nn svart</a> <a href="http://www.moreheaddotts.com/air-jordan-retro-11-svart-jade-obuvi">air jordan retro 11 svart jade</a> <a href="http://www.qgchsmrt.com/nike-free-5.0-print-rojo-zapatosl">nike free 5.0 print rojo</a> <a href="http://www.firagandia.com/nike-blazer-mid-rosso-high-top-scarpe-da-ginnastica-scarpeh">nike blazer mid rosso high top scarpe da ginnastica</a> <a href="http://www.lmladeco.com/adidas-superstar-supercolor-pink-shoesk">adidas superstar supercolor pink</a> <a href="http://www.brinkmanmdc.com/ray-ban-rb3422q-sunglassesh">ray ban rb3422q</a>
msignworx http://www.msignworx.com/
karmacanix
 karmacanix 2019-03-19 02:18回复
#118
<a href="http://www.laketreepress.com/dam%C3%A4nner-air-jordan-retro-13-wei%C3%9F-orangen-schuhel">dam盲nner air jordan retro 13 wei脽 orangen</a> <a href="http://www.prohaarklinik.com/nike-air-pegasus-92-oranger-bleu-chaussuresq">nike air pegasus 92 oranger bleu</a> <a href="http://www.bonfanticare.com/mujeres-nike-blazer-blanco-amarillo-zapatosl">mujeres nike blazer blanco amarillo</a> <a href="http://www.antoniopagni.com/air-jordan-cp3-mintgr%C3%B8n-lilla-skoj">air jordan cp3 mintgr酶n lilla</a> <a href="http://www.wcshosting.com/kvinners-nike-air-max-zero-r%C3%B8d-gr%C3%A5-obuvi">kvinners nike air max zero r酶d gr氓</a> <a href="http://www.biddingstream.com/mujeres-nike-roshe-run-slip-p%C3%BArpura-oro-zapatosp">mujeres nike roshe run slip p煤rpura oro</a>
karmacanix http://www.karmacanix.com/
mkdeltalandsgroup
 mkdeltalandsgroup 2019-03-18 19:58回复
#117
<a href="http://www.vorax.net/jordan-retro-6-bl%C3%A5-and-lyser%C3%B8d-schuhea">jordan retro 6 bl氓 and lyser酶d</a> <a href="http://www.vxrdriversclub.net/jordan-4-svart-and-gray-chaussuresa">jordan 4 svart and gray</a> <a href="http://www.wangentreppe.net/air-jordan-eclipse-r%C3%B8d-wagon-obuva">air jordan eclipse r酶d wagon</a> <a href="http://www.wasserijkorsow.net/hombres-nike-air-max-87-sb-blanco-naranja-butyc">hombres nike air max 87 sb blanco naranja</a> <a href="http://www.webstudioseattle.net/kobe-11-university-r%C3%B8d-cross-scarpeb">kobe 11 university r酶d cross</a> <a href="http://www.weddingstogokeywest.net/salomon-xt-hawk-hvit-gr%C3%A5-kurpesf">salomon xt hawk hvit gr氓</a>
mkdeltalandsgroup http://www.mkdeltalandsgroup.net/
gccqueens
 gccqueens 2019-03-18 16:56回复
#116
<a href="http://www.jazzoutlaw.com/jordan-future-gris-and-azul-schuhef">jordan future gris and azul</a> <a href="http://www.fifteenforty.com/nike-free-run-4.0-v3-hvid-dot-scarpee">nike free run 4.0 v3 hvid dot</a> <a href="http://www.cagiad.com/jordan-retro-4-wei%C3%9F-schwarz-cem%C3%A4nnert-grau-kurpesa">jordan retro 4 wei脽 schwarz cem盲nnert grau</a> <a href="http://www.magicwristlet.com/nike-free-flyknit-5.0-htm-for-venta-virginia-kurpesc">nike free flyknit 5.0 htm for venta virginia</a> <a href="http://www.fleksys.com/jordan-5-negro-and-rojo-obuva">jordan 5 negro and rojo</a> <a href="http://www.teamworkpress.com/nike-air-jordan-11-retro-low-gr%C3%B8n-schuhef">nike air jordan 11 retro low gr酶n</a>
gccqueens http://www.gccqueens.com/
bambubaits
 bambubaits 2019-03-18 12:02回复
#115
<a href="http://www.niffadvisory.com/limited-nike-camo-womens-sam-mills-jersey-nfl-51-carolina-panthers-2018-salute-to-service-nflw">limited nike camo womens sam mills jersey nfl 51 carolina panthers 2018 salute to service</a> <a href="http://www.rahsaskatoon.com/adidas-pr%C3%B8dator-incurza-sg-solar-bl%C3%A5-butye">adidas pr酶dator incurza sg solar bl氓</a> <a href="http://www.remaxsetitres.com/hombres-nike-sb-stefan-janoski-max-oro-rojo-kurpesd">hombres nike sb stefan janoski max oro rojo</a> <a href="http://www.runninbunions.com/dam%C3%A4nner-ralph-lauren-city-polo-khaki-rosa-polos">dam盲nner ralph lauren city polo khaki rosa</a> <a href="http://www.dinerwaresfv.com/nike-zoom-vomero-femmes-blanc-rose-butyf">nike zoom vomero femmes blanc rose</a> <a href="http://www.fwmuslims.com/ralph-lauren-coats-beige-hvit-poloz">ralph lauren coats beige hvit</a>
bambubaits http://www.bambubaits.com/
sunbeltsaves
 sunbeltsaves 2019-03-17 13:24回复
#114
<a href="http://www.findatrans.com/nike-free-run-3-herre-sort-hvid-skoj">nike free run 3 herre sort hvid</a> <a href="http://www.isabellerigal.com/nike-zoom-vomero-kvinners-s%C3%B8lv-hvit-obuvi">nike zoom vomero kvinners s酶lv hvit</a> <a href="http://www.esnafkocaeli.com/mujeres-nike-air-max-95-negro-oro-zapatosk">mujeres nike air max 95 negro oro</a> <a href="http://www.dkdjabar.com/kvinders-air-max-90-blomsts-gr%C3%A5-hvid-skoq">kvinders air max 90 blomsts gr氓 hvid</a> <a href="http://www.jamiecirillo.com/air-jordan-4-infrarosso-scarpeh">air jordan 4 infrarosso</a> <a href="http://www.xpostshopx.com/ua-clutchfit-drive-bianca-blu-scarpei">ua clutchfit drive bianca blu</a>
sunbeltsaves http://www.sunbeltsaves.com/
lcsyzw
 lcsyzw 2019-03-15 15:03回复
#113
<a href="http://www.tjharkins.com/air-jordan-retro-7-varsity-lilla-kit-kurpesa">air jordan retro 7 varsity lilla kit</a> <a href="http://www.yolohostelrio.com/nike-air-presto-ultra-flyknit-gr%C3%B8nn-r%C3%B8d-kurpesf">nike air presto ultra flyknit gr酶nn r酶d</a> <a href="http://www.askforpauline.com/femminile-ralph-lauren-pony-verde-rosa-polou">femminile ralph lauren pony verde rosa</a> <a href="http://www.bringussocial.com/nike-air-huarache-qs-rosso-queen-scarpec">nike air huarache qs rosso queen</a> <a href="http://www.ecoforplanet.com/nfl-nike-minnesota-vikings-97-everson-griffen-green-salute-to-service-mens-pullover-hoodie-nfls">nfl nike minnesota vikings 97 everson griffen green salute to service mens pullover hoodie</a> <a href="http://www.mbesthetics.com/adidas-kinder-schuhe-blau-grau-scarpeg">adidas kinder schuhe blau grau</a>
lcsyzw http://www.lcsyzw.com/
breconpharm
 breconpharm 2019-03-15 09:09回复
#112
<a href="http://www.setusoftware.com/north-face-apex-bionic-jacket-mens-cheap-northfaceh">north face apex bionic jacket mens cheap</a> <a href="http://www.shopteamcubs.com/adidas-neo-white-high-tops-shoesh">adidas neo white high tops</a> <a href="http://www.danieldavinci.com/femmes-nike-air-max-90-noir-chaussuresl">femmes nike air max 90 noir</a> <a href="http://www.lovirani.com/womens-black-high-top-converse-on-sale-shoesj">womens black high top converse on sale</a> <a href="http://www.rosebites.com/pittsburgh-pirates-47-mlb-camfill-neon-snapback-cap-hatk">pittsburgh pirates 47 mlb camfill neon snapback cap</a> <a href="http://www.webrushllc.com/dark-lyser%C3%B8d-converse-skoj">dark lyser酶d converse</a>
[url=http://www.breconpharm.com/]breconpharm[/url]
ticahome
 ticahome 2019-03-15 03:07回复
#111
<a href="http://www.tmzred.com/air-jordan-future-silver-blue-shoesh">air jordan future silver blue</a> <a href="http://www.alcovozov.com/maschio-nike-flynit-air-max-blu-oro-scarpei">maschio nike flynit air max blu oro</a> <a href="http://www.ahmztradefx.com/dam%C3%A4nner-air-jordan-12-minzgr%C3%BCn-schuhej">dam盲nner air jordan 12 minzgr眉n</a> <a href="http://www.isampled.com/rvca-cedars-trucker-hat-hath">rvca cedars trucker hat</a> <a href="http://www.aldervets.com/femmes-nike-huarache-utility-blanc-rouge-chaussuresh">femmes nike huarache utility blanc rouge</a> <a href="http://www.vanltl.com/adidas-nmd-runner-grigio-argento-scarpeq">adidas nmd runner grigio argento</a>
ticahome http://www.ticahome.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸