揭秘HTML5定位：Google新科技背后的秘密

服务商方面的原因

各位宝贝儿，咱今儿来聊聊天马行空的话题——HTML5定位和百度地图！告诉你们个秘密，其实HTML5定位全得感谢Google家的新科技！不过，Google家有些地方可能不让你用这项功能，这么一来问题就来了，HTML5定位还是没法愉快地进行！

HTML5自带的地理定位

实话实说，虽然HTML5里有地理定位功能，可比起大牛们用的第三方神器如百度地图啥的，还是差点劲儿。所以，咱们开发项目的时候，直接用HTML5上的这玩意儿就很少了，通常是去找些别的工具来完成更准确、更稳妥的定位工作。可能正因为这个缘故，HTML5的地理定位应用一直发展得比较慢。

学习HTML5地理定位

getCurrentPosition:fn(succ,err) //获取当前定位数据,其中包含成功获取和获取失败的回调函数
watchPosition: fn   //监视定位数据
clearWatch: fn   //清除定位监视

HTML5新出的地理定位功能值得关注，赶快学学怎么使用相关API才行！因为这就是玩转这项功能的秘诀！这个功能厉害着，能告诉你用户在哪儿，还能就近提供各种LBS服务，比如订餐、打车、导航等等，都是靠它搞定的！记得还有其他方法也能找出用户所在具体地点，比如通过手机信号定位，或是找到电脑的IP地址。

从HTML5中获取定位信息

  
  
  
      
      
  
  
获得我的定位数据  
  
    btn.onclick=function(){   //点击按钮时触发  
        navigator.geolocation.getCurrentPosition(succCB,errCB);  
  
        function succCB(pos){  //成功的获取回调函数！！  
            console.log('成功获取到定位数据');  
            console.log('纬度:'+pos.coords.longitude);  
            console.log('经度:'+pos.coords.latitude);  
            console.log('高度:'+pos.coords.altitude);  
            console.log('速度:'+pos.coords.speed);  
  
        }  
        function errCB(err){  //获取失败的回调函数！！  
            console.log('获取到定位数据失败');  
            console.log(err.message);  //输出失败的信息或原因！  
        }  
    }  
  
  

想看自己在哪儿？在浏览器里按F12，找控制台，敲入window.navigator.geolocation，搞定！这里面有几个实用功能得掌握：getCurrentPosition告诉你现在在哪儿；watchPosition能随时盯住你的位置动向；如果不想被追踪，用clearWatch就能一键清零。

使用百度地图在项目中进行定位

navigator.geolocation.getCurrentPosotion(
function(pos){
console.log('定位数据获取成功');
//pos.coords.longtitude ....
},
function(err){
console.log('定位数据获取失败');
//err.code   err.message
}
)

用百度地图？先搞懂他们那些代码再说，这样你就有资格拿到那个秘密API了。你想，没它咱们咋能找到家？

注册开发者账号获取密钥

嘿~别傻乎乎地在百度地图找源代码！不过你要是想用的话，就去做个APP开发者呗！成功注册为开发者以后，只需要填报几个表格就行了。搞完这些，系统会给你一个“访问应用码”，这玩意儿作用大着嘞！

开始使用百度地图API

首先先上百度开放平台。看好哪个平台（比如webservice)，点儿开JavaScript API界面就能找见详细信息和示例了。记住用百度地图API得先得到密钥才行。然后照着提示，把密钥和代码加进你们的项目里就可以了。

展示百度地图功能

搞定API密钥跟函数调用，咱们就能轻松玩转百度地图！设置API的时候，还能选中心点和等级啥的，看遍全世界美景so easy！加几个控件，体验更好哟~

咱们来聊聊HTML5地理位置定位和怎么用百度地图！学得好的话，能帮你的网站或者APP提个速！

。