seo优化| 运维百科| 网站建设技术| 网页设计技术| 网页设计教程| html及CSS教程|

html5中地理位置定位api接口开发应用小结

人浏览  发布时间:2021-01-20

HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全 地理位置定位的几种方式:IP地址,GPS,Wifi,GS...
HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全
地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA 

地理位置获取流程: 
1、用户打开需要获取地理位置的web应用。 
2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 
3、假设用户允许,浏览器从设别查询相关信息。 
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。 

HTML5地理地位的实现: 
1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术 
2. 精确定位用户的地理位置( 精度最高达10m之内,依赖设备 ) 
3. 持续追踪用户的地理位置 
4. 与 Google Map、或者 Baidu Map 交互呈现位置信息 

Geolocation API 用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许” or “拒绝”。 
先看看哪些浏览器支持Geolocation API: 
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+ 
Geolocation API存在于navigator对象中,只包含3个方法: 

复制代码
代码如下:

1、getCurrentPosition //当前位置 
2、watchPosition //监视位置 
3、clearWatch //清除监视 
navigator.geolocation.getCurrentPosition( … , function(error){ 
switch(error.code){ 
case error.TIMEOUT : 
alert( " 连接超时,请重试 " ); 
break; 
case error.PERMISSION_DENIED : 
alert( " 您拒绝了使用位置共享服务,查询已取消 " ); 
break; 
case error.POSITION_UNAVAILABLE : 
alert( " ,抱歉,暂时无法为您所在的星球提供位置服务 " ); 
break; 

}); 

watchPosition像一个追踪器与clearWatch成对。 
watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。 
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options); 
navigator.geolocation.clearWatch(watchPositionId );

HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全。 
1、开启,判断是否浏览器支持LBS api 

复制代码
代码如下:

function isGeolocationAPIAvailable() 

var location = "No, Geolocation is not supported by this browser."; 
if (window.navigator.geolocation) { 
location = "Yes, Geolocation is supported by this browser."; 

alert(location); 

上面的例子中,还在displayError方法中,捕捉了异常; 
2、获得用户的地理位置 
这个使用getCurrentPosition就可以了; 

复制代码
代码如下:

function requestPosition() { 
if (nav == null) { 
nav = window.navigator; 

if (nav != null) { 
var geoloc = nav.geolocation; 
if (geoloc != null) { 
geoloc.getCurrentPosition(successCallback); 

else { 
alert("Geolocation API is not supported in your browser"); 


else { 
alert("Navigator is not found"); 


当获得地理位置成功后,会产生一个回调方法了,处理返回的结果, 

复制代码
代码如下:

function setLocation(val, e) { 
document.getElementById(e).value = val; 

function successCallback(position) 

setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude"); 

3、一个很常见的问题,是如何跟踪用户不断变化的地理位置,这里小结下其中用到的两个api 
1 watchPosition 
例子如下: 

复制代码
代码如下:

function listenForPositionUpdates() { 
if (nav == null) { 
nav = window.navigator; 

if (nav != null) { 
var geoloc = nav.geolocation; 
if (geoloc != null) { 
watchID = geoloc.watchPosition(successCallback); 
} else { 
alert("Geolocation API is not supported in your browser"); 

} else { 
alert("Navigator is not found"); 


然后在successCallback中,就可以设置显示最新的地理位置: 

复制代码
代码如下:

function successCallback(position){ 
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); 

如果不希望实时跟踪,则可以取消之: 
function clearWatch(watchID) { 
window.navigator.geolocation.clearWatch(watchID); 

4、如何处理异常 
当遇到异常时,可以捕捉之: 

复制代码
代码如下:

if (geoloc != null) { 
geoloc.getCurrentPosition(successCallback, errorCallback); 

function errorCallback(error) { 
var message = ""; 
switch (error.code) { 
case error.PERMISSION_DENIED: 
message = "This website does not have permission to use " 
+ "the Geolocation API"; 
break; 
case error.POSITION_UNAVAILABLE: 
message = "The current position could not be determined."; 
break; 
case error.PERMISSION_DENIED_TIMEOUT: 
message = "The current position could not be determined " 
+ "within the specified timeout period."; 
break; 

if (message == "") { 
var strErrorCode = error.code.toString(); 
message = "The position could not be determined due to " 
+ "an unknown error (Code: " + strErrorCode + ")."; 

alert(message); 

5、 在google 地图上显示位置(前提是有google map api等设置好) 

复制代码
代码如下:

function getCurrentLocation() 

if (navigator.geolocation) 

navigator.geolocation.getCurrentPosition(showMyPosition,showError); 

else 

alert("No, Geolocation API is not supported by this browser."); 


function showMyPosition(position) 

var coordinates=position.coords.latitude+","+position.coords.longitude; 
var map_url="http://maps.googleapis.com/maps/api/staticmap?center=" 
+coordinates+"&zoom=14&size=300x300&sensor=false"; 
document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />"; 

function showError(error) 

switch(error.code) 

case error.PERMISSION_DENIED: 
alert("This website does not have permission to use the Geolocation API") 
break; 
case error.POSITION_UNAVAILABLE: 
alert("The current position could not be determined.") 
break; 
case error.TIMEOUT: 
alert("The current position could not be determined within the specified time out period.") 
break; 
case error.UNKNOWN_ERROR: 
alert("The position could not be determined due to an unknown error.") 
break; 

(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图