微信内前端H5定位方式比较 |
您所在的位置：网站首页 › 微信小程序获取定位权限 › 微信内前端H5定位方式比较 |
|
在微信内使用定位功能，如果能借助到微信app自身的定位优势，定位才能更加精准。注意：使用定位，摄像头，声音等都需要通过https协议访问网站。 1. 使用原生接口Geolocation var options = { enableHighAccuracy: true, //true为高精度，但耗电量增加 timeout: 5000, //超时时间必填，否则默认为无穷大 maximumAge: 0 //位置的缓存时间，默认0即不缓存 }; function success(pos) { var crd = pos.coords; console.log('Your current position is:'); console.log('Latitude : ' + crd.latitude); console.log('Longitude: ' + crd.longitude); console.log('More or less ' + crd.accuracy + ' meters.'); }; function error(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }; navigator.geolocation.getCurrentPosition(success, error, options); 注意：这种方式只能获取wgs84的坐标，如果想在腾讯地图中显示则需要转换成火星坐标gcj02；还有一个大坑，返回的位置是Coordinates 对象，使用JSON.stringify时返回的是空的"{}"，解决方法是JSON.stringify($.extend({},position))。 2.使用微信JS-SDK获取地理位置接口 wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: function (res) { var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90 var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 var speed = res.speed; // 速度，以米/每秒计 var accuracy = res.accuracy; // 位置精度 } }); 优点是借用了微信的定位功能，定位更精准了，可以指定坐标类型了，但缺点是需要有公众号及其开发经验。 3.使用腾讯地图的前端定位组件此组件更为强大，同样使用了微信的定位功能，但又不需要微信服务号，返回的字段更详细，还提供了IP定位，监听位置信息的改变等功能（并且微信之外也能用）。 这里需要用到开发密钥，注册地址如下： https://lbs.qq.com?lbs_invite=RLV8FLR 先直观的来段json，展示一下有哪些字段吧： { "module": "geolocation", "type": "cache", "adcode": "310101", //行政区ID，六位数字, 前两位是省，中间是市，后面两位是区 "nation": "中国", "province": "上海市", "city": "上海市", "district": "黄浦区", "addr": "黄浦区延安高架路(大世界地铁站西北)", "lat": 31.228474, //火星坐标(gcj02)，腾讯、Google、高德通用 "lng": 121.478224, "accuracy": 600 //误差范围，以米为单位 }是不是一下就把前面的都比下去了。下面提供一个完整示例： 前端定位模块 * { 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必填，开发密钥", "referer必填，调用来源"); document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px'; var positionNum = 0; var options = {timeout: 8000};//定位的超时时间，默认值为10s 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; };总结：微信里定位就选腾讯地图吧，而且也是小程序的不二选择呀。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |