美工统筹SEO，为企业电子商务营销助力！
HTML5地舆定位与第三方东西百度舆图的操纵一佰互联网站扶植(www.taishanly.com) 宣布时辰：2020-04-21 17:19:25 阅读数: 95 |
| 媒介： 一、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})二、操纵第三方东西--百度舆图 正如我在媒介中提到，在名目和良多手机操纵中都是操纵百度舆图供给给用户来挑选定位信息，那末咱们若何样在本身名目中操纵百度舆图呢？ 起首咱们得晓得，百度舆图的源代码是不会供给给大师下载的，这触及公司好处，晓得人不用多说，可是百度仍是个很有良知的公司，能够让咱们注册开辟者账号来停止开辟操纵！ 操纵步骤： 起首翻开官网http://lbsyun.baidu.com/，而后拉到最下面： 能够看到，百度舆图能够用来停止web开辟，Android开辟，ios开辟，这里咱们操纵web开辟，点击JavaScript API 稍后会诠释甚么是密钥，先点击进入页面，若是弹出登岸界面的话，则登岸，登岸点击注册开辟者账号(由于我已近注册了，以是这里没法给大师演示，须要大师本身操纵)，输出相干的手机，邮箱，而后到邮箱外面考证，考证胜利后,，点击建立操纵，会呈现以下界面： 操纵称号随便填写一个 这里会显现适才建立的操纵编号，操纵称号，和最首要的拜候操纵码，便是后面提到的密钥! 而后获得密钥以后，咱们回到主页http://lbsyun.baidu.com/index.php?title=jspopular 咱们建立一个新的HTML文件，将下面这段代码复制到HTML文件中 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jrbPiu6jcbPsxGvdQXAc0C......"> //v2.0版本的援用体例：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" //v1.4版本及之前版本的援用体例：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" </script> <style> #container{ width: 800px; height: 500px; } </style> </head> <body> <h1>操纵百度舆图</h1> <div id="container"></div> <script type="text/javascript"> // 建立舆图实例，避免与Map重名，以是操纵BMap.Map var map = new BMap.Map("container"); // 建立点坐标 var point = new BMap.Point(113.946317,22.549008); // 初始化舆图，设置中间点坐标和舆图级别 1~18级 map.centerAndZoom(point, 18); //鼠标转动，舆图缩放 map.enableScrollWheelZoom(true); //增加舆图控件 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.MapTypeControl()); //增加舆图标注 var marker=map.addOverlay(new BMap.Marker(point)); </script> </body> </html> 操纵百度舆图： OK，咱们胜利的在HTML文件中操纵了百度舆图，此刻能够像在http://map.baidu.com中一样操纵百度舆图了！！ 相干函数申明： <script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度舆图请求的拜候秘钥 "> </script> 在ak中输出适才获得那一长串密钥便可援用百度舆图！！ 建立舆图实例 --必选。 var map = new BMap.Map("container"); 建立一个指定的点 ，你的经纬度信息！！若是不晓得能够操纵后面的 var point = new BMap.Point(116.300982,39.915907); 以指定点为中间显现舆图 数字17指的是层级，层级能够分为1~18级，层级越小舆图看的规模越大，层级越大看的规模越大，本身能够测试一下差别层级显现的舆图结果！！---必选。 map.centerAndZoom(point, 17); 舆图能够跟着鼠标自在的缩放---可选。 map.enableScrollWheelZoom(true); 舆图显现控件--结果本身测试，这里不是首要函数不再加以申明---可选。 map.addControl(new BMap.NavigationControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.MapTypeControl()); 舆图上显现一个标注(标注)--可选 var marker=map.addOverlay(new BMap.Marker(point)); OK，第三方百度舆图就说到这里，另有良多好玩的函数能够本身操纵，以是体例和参数都在API中能够找到！ 以上便是本文的全数内容，但愿对大师的进修有所赞助，也但愿大师多多撑持网页设想。 |
TAG标签： HTML5地舆定位与第三方东西百度舆图的操纵 |
上一篇：纯HTML5+CSS3建造诞辰蛋糕代码 下一篇： 处理img标签高低呈现空隙的体例 |
| [前往消息列表] |
