HTML5地理定位与第三方工具百度地图的应用
|
前言： 一、HTML5的新特性--地理定位 一个新名词Geolocation: 用于获得当前浏览器所在的地理坐标，从而提供LBS（Location Based Service），如饿了吗送餐、滴滴打车、高德导航等软件都是使用LBS，包括如下数据： 使用平台分为移动端和PC端： 正题：
我们看到定位信息上有主要三个方法，含义分别是： getCurrentPosition:fn(succ,err) //获取当前定位数据,其中包含成功获取和获取失败的回调函数 watchPosition: fn //监视定位数据 clearWatch: fn //清除定位监视 既然这样我们就知道如何在HTML5文件中使用地理定位了，我们利用开发工具创建一个HTML文件，并创建一个按钮，当点击按钮的时候，后台显示定位信息！ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">获得我的定位数据</button> <script> 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); //输出失败的信息或原因！ } } </script> </body> </html>
如图所示，当点击按钮时，成功获取到了定位数据，但是高度和速度由于PC端原因所以为Null，所以我们只要记住一个方法就可以在HTML5中获取到地理定位！ navigator.geolocation.getCurrentPosotion( function(pos){ console.log('定位数据获取成功'); //pos.coords.longtitude .... }, function(err){ console.log('定位数据获取失败'); //err.code err.message } ) 二、使用第三方工具--百度地图 正如我在前言中提到，在项目和许多手机应用中都是使用百度地图提供给用户来选择定位信息，那么我们怎么样在自己项目中使用百度地图呢？ 首先我们得知道，百度地图的源代码是不会提供给大家下载的，这涉及公司利益，懂得人不必多说，但是百度还是个很有良心的公司，可以让我们注册开发者账号来进行开发使用！ 使用步骤： 首先打开官网，然后拉到最下面：
可以看到，百度地图可以用来进行web开发，Android开发，ios开发，这里我们使用web开发，点击JavaScript API
稍后会解释什么是密钥，先点击进入页面，如果弹出登陆界面的话，则登陆，登陆点击注册开发者账号(由于我已近注册了，所以这里无法给大家演示，需要大家自己操作)，输入相关的手机，邮箱，然后到邮箱里面验证，验证成功后,，点击创建应用，会出现如下界面：
应用名称随意填写一个
这里会显示刚才创建的应用编号，应用名称，以及最重要的访问应用码，就是前面提到的密钥! 然后得到密钥之后，我们回到主页?title=jspopular
我们创建一个新的HTML文件，将上面这段代码复制到HTML文件中 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
