前端的定位控件集合 |
您所在的位置：网站首页 › bug的定位点 › 前端的定位控件集合 |
前端的定位控件集合
|
前端定位控件的使用，腾讯，高德，百度
项目经理让我去研究一下前台定位控件的使用，之后要求是适用于微信浏览器，就是微信公众号里面的网页，还要求适用于手机自带的浏览器，手机的uc浏览器等应用市场上的几款主流的浏览器（百度，QQ等）。之后选了很久，得出了一些心得，到时候在进行前端的控件的选择的时候，可以快速的选择不用在进行学习了。 一、腾讯地图api直接找到腾讯地图的api，之后在里面找到了这个定位的demo，之后申请了也给开发的key，就可以出来了数据，在pc，手机应用市场里面的浏览器，以及手机自带的浏览器亲测好用，但是在微信里面无法使用，显示的是，定位超时，这个具体的，在腾讯的api里面没有查询到。 腾讯前端定位模块 * { margin: 0; padding: 0; border: 0; } body { position: absolute; width: 100%; height: 100%; text-align: center; } #pos-area { background-color: #009DDC; margin-bottom: 10px; width: 100%; overflow: scroll; text-align: left; color: white; } #demo { padding: 8px; font-size: small; } #btn-area { height: 100px; } button { margin-bottom: 10px; padding: 12px 8px; width: 42%; border-radius: 8px; background-color: #009DDC; color: white; }点击下面的按钮，获得对应信息： 获取精确定位信息 获取粗糙定位信息 开始监听位置 停止监听位置 var geolocation = new qq.maps.Geolocation("你的腾讯申请的key", "map"); document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px'; var positionNum = 0; var options = {timeout: 8000}; function showPosition(position) { positionNum ++; document.getElementById("demo").innerHTML += "序号：" + positionNum; document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4); document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; function showErr() { positionNum ++; document.getElementById("demo").innerHTML += "序号：" + positionNum; document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！"; document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; function showWatchPosition() { document.getElementById("demo").innerHTML += "开始监听位置！"; geolocation.watchPosition(showPosition); document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; function showClearWatch() { geolocation.clearWatch(); document.getElementById("demo").innerHTML += "停止监听位置！"; document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; };下面两个分别是浏览器里面的效果和微信里面的效果。
注册了一个百度的账号，之后申请一个应用，发现要注册白名单的域名，没办法为了测试进行域名的绑定，之后发现了三种定位模式，一种是浏览器定位，一种是ip定位，一种是sdk定位，经过测试，手机了里面都是好用了，之后微信里面也是好用的，但是浏览器的定位方式不准确，ip定位和sdk定位很准确。 baidudingwei html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} // var map = new BMap.Map("container"); // 创建地图实例 // var point = new BMap.Point(116.404, 39.915); // 创建点坐标 // map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ console.log(r); }); function myFun(result){ console.log(result); } var myCity = new BMap.LocalCity(); myCity.get(myFun); var geolocation = new BMap.Geolocation(); // 开启SDK辅助定位 geolocation.enableSDKLocation(); geolocation.getCurrentPosition(function(r){ console.log(r); });在浏览器里面和在微信里面测试的结果是一样的，所以就展示一张图片了。
经过测试，是可以定位到省市的，区不是特别准确，有的时候会出现误差，经过测试，高德的api试用于手机浏览器，微信等浏览器，目前发现的定位效果最好的，兼容性效果也很好的。
最后就是微信公众号的自带定位的方式，16年的时候使用了微信的开发但是远远没有现在开发的复杂，需要有校验的程序，换取token等一系列的身份认证操作，之后才可以调用其中的api，这里我只有个人的公众号，并没有一个企业号，所以在开发的时候，还有很大的局限性，等我把微信这一套弄清楚之后，在写一篇博客，供大家批评指正。 |
【本文地址】