Html5中怎么利用Geolocation获取地理位置信息

tangjin

作者

这期内容当中小编将会给大家带来有关Html5中怎么利用Geolocation获取地理位置信息，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。

Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。

如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。

代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：

<!DOCTYPEhtml>
<html>
<head>
<title>H5地理位置Demo</title>
<scriptsrc="http://api.map.baidu.com/api?v=1.3"type="text/javascript">
</script>
<scripttype="text/javascript"src="convertor.js">
</script>
</head>
<body>
<divid="map"style="width:600px;height:400px">
</div>
</body>
<scripttype="text/javascript">
if(window.navigator.geolocation){
varoptions={
enableHighAccuracy:true,
};
window.navigator.geolocation.getCurrentPosition(handleSuccess,handleError,options);
}else{
alert("浏览器不支持html5来获取地理位置信息");
}

functionhandleSuccess(position){
//获取到当前位置经纬度本例中是chrome浏览器取到的是google地图中的经纬度
varlng=position.coords.longitude;
varlat=position.coords.latitude;
//调用百度地图api显示
varmap=newBMap.Map("map");
varggPoint=newBMap.Point(lng,lat);
//将google地图中的经纬度转化为百度地图的经纬度
BMap.Convertor.translate(ggPoint,2,function(point){
varmarker=newBMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point,15);
});
}

functionhandleError(error){

}
</script>
</html>

convertor.js文件：

(function(){//闭包
functionload_script(xyUrl,callback){
varhead=document.getElementsByTagName('head')[0];
varscript=document.createElement('script');
script.type='text/javascript';
script.src=xyUrl;
//借鉴了jQuery的script跨域方法
script.onload=script.onreadystatechange=function(){
if((!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){
callback&&callback();
//HandlememoryleakinIE
script.onload=script.onreadystatechange=null;
if(head&&script.parentNode){
head.removeChild(script);
}
}
};
//UseinsertBeforeinsteadofappendChildtocircumventanIE6bug.
head.insertBefore(script,head.firstChild);
}
functiontranslate(point,type,callback){
varcallbackName='cbk_'+Math.round(Math.random()*10000);//随机函数名
varxyUrl="http://api.map.baidu.com/ag/coord/convert?from="+type
+"&to=4&x="+point.lng+"&y="+point.lat
+"&callback=BMap.Convertor."+callbackName;
//动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName]=function(xyResult){
deleteBMap.Convertor[callbackName];//调用完需要删除改函数
varpoint=newBMap.Point(xyResult.x,xyResult.y);
callback&&callback(point);
}
}

window.BMap=window.BMap||{};
BMap.Convertor={};
BMap.Convertor.translate=translate;
})();

上述就是小编为大家分享的Html5中怎么利用Geolocation获取地理位置信息了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-07-29 21:58:51

html5