介绍 & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; title> H5地理位置Demo
,,,,,,,& lt; https://www.yisu.com/zixun/script src=" http://api.map.baidu.com/api?v=1.3 " type=" text/javascript "> 头
<身体>
这期内容当中小编将会给大家带来有关Html5中怎么利用地理位置获取地理位置信息,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。
Html5获取地理位置信息是通过地理定位API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项。
如下演示演示了通过地理位置获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城内环东四路入口处,与本人所在位置(华工学生宿舍)偏差还是有点大的,达到200 - 300米左右。
代码如下所示(其转换器中。js为百度地图提供的坐标转化文件):
如果(window.navigator.geolocation) {={var选项
enableHighAccuracy:没错,
};
window.navigator.geolocation。getCurrentPosition (handleSuccess handleError选项);
其他}{
警报(“浏览器不支持html5来获取地理位置信息”);
}
函数handleSuccess(位置){//获取到当前位置经纬度本例中是chrome浏览器取到的是谷歌地图中的经纬度
液化天然气var=position.coords.longitude;
var lat=position.coords.latitude;//调用百度地图api显示
var=new BMap.Map地图(地图);
新BMap var ggPoint=５?液化天然气,lat);//将谷歌地图中的经纬度转化为百度地图的经纬度
BMap.Convertor。翻译(ggPoint 2函数(点){
var=new BMap.Marker标志(点);
map.addOverlay(标记);
地图。centerAndZoom(点,15);
});
}
函数handleError(错误){
}> (函数(),{,//闭包
,,,function load_script (xyUrl,,回调),{
,,,,,,,var head =, document.getElementsByTagName(& # 39;头# 39;)[0];
,,,,,,,var script =, document.createElement(& # 39;脚本# 39;);
,,,,,,,script.type =, & # 39; text/javascript # 39;;
,,,,,,,script.src =, xyUrl;
,,,,,,,//,借鉴了jQuery的脚本跨域方法
,,,,,,,script.onload =, script.onreadystatechange =,()函数,{
,,,,,,,,,,,if ((! this.readyState | |, this.readyState ===,“loaded", | |, this.readyState ===,“complete")), {
,,,,,,,,,,,,,,,callback ,,,回调();
,,,,,,,,,,,,,,,//,Handle memory leak 即拷贝
,,,,,,,,,,,,,,,script.onload =, script.onreadystatechange =,空;
,,,,,,,,,,,,,,,if (head ,,, script.parentNode), {
,,,,,,,,,,,,,,,,,,,head.removeChild(脚本);
,,,,,,,,,,,,,,,}
,,,,,,,,,,,}
,,,,,,,};
,,,,,,,//,Use insertBefore instead of appendChild 用circumvent an IE6 bug。
,,,,,,,head.insertBefore(脚本,,head.firstChild);
,,,}
,,,function 翻译(点,,,,回调),{
,,,,,,,var callbackName =, & # 39; cbk_& # 39;, +, Math.round (math . random(), *, 10000),,//,随机函数名
,,,,,,,var xyUrl =,“http://api.map.baidu.com/ag/coord/convert?from=" +,类型
,,,,,,,,,,,,,,,和,,,=4,x=? +, point.lng +,“, y=? + point.lat
,,,,,,,,,,,,,,,+,“,回调=BMap.Convertor干净,+,callbackName;
,,,,,,,//,动态创建脚本标签
,,,,,,,load_script (xyUrl);
null
null
null
null
null
null
null
null
null
null
null
转换器。js文件:
