微信小程序实现获取准确的腾讯定位地址功能示例


Posted in Javascript onMarch 27, 2019

本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能。分享给大家供大家参考,具体如下:

官方参考文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html

逆地址解析(坐标位置描述)

1. 申请开发者密钥(key)与设置

个人使用:登录,点击“key管理”,进入设置,选择“WebServiceAPI”,如果没有小程序ID,勾选“授权IP”,如果有小程序ID,勾选“域名白名单”,且勾选“微信小程序”,输入授权APPID。
https://lbs.qq.com/console/key.html
企业使用:登录企业微信公众号,选择“开发”-“开发者工具”,开通“腾讯位置服务”,进入后台管理;点击“key管理”,进入设置,勾选所需要使用的企业名下的小程序ID,选择“WebServiceAPI”,勾选“域名白名单”。

2. 下载微信小程序JavaScriptSDK

3. 添加小程序地理位置说明

2019年1月14日起新提交发布的版本若未填写地理位置用途说明,则将无法正常调用地理位置相关接口,请及时填写地理位置用途说明

相关文档:https://developers.weixin.qq.com/community/develop/doc/000ea276b44928f7e8d73d0a65b801?idescene=6

在app.json中添加以下代码

"permission": {
  "scope.userLocation": {
   "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
}

4. JS 代码

var QQMapWX = require('../../../page/common/sdk/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
 key: 'Key'
});
console.log('signin')
const _this = this;
wx.getLocation({
    type: 'gcj02',
    success: function (res) {
     qqmapsdk.reverseGeocoder({
      location: {
       latitude: res.latitude,
       longitude: res.longitude
      },
      success: function (addressRes) { //成功后的回调
       var addressRes = addressRes.result;
       console.log( addressRes.address)
        },
      fail: function (error) {
       console.error(error);
      },
      complete: function (addressRes) {
       console.log(addressRes);
      }
     })
    }
})

成功获取到的信息截图

微信小程序实现获取准确的腾讯定位地址功能示例

微信开发者工具上进行测试的时候,定位不准确,需要启用“真机调试”,在手机上即可准确获取定位信息。

5. 百度地图坐标转化JS

实际应用中发现腾讯地图定位的坐标不准确,地址正确但定位坐标相差很远,后期在地图上进行展示的时候建议使用百度地图,可以准确的在地图上显示。

代码写在获取地址成功调用里面。

var addressRes = addressRes.result;
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
var x = parseFloat(addressRes.location.lng);
var y = parseFloat(addressRes.location.lat);
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
var lng = z * Math.cos(theta) + 0.0065;
var lat = z * Math.sin(theta) + 0.006;
console.log(lng)
console.log(lat)

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
详解JS浏览器事件循环机制
Mar 27 #Javascript
详解如何更好的使用module vuex
Mar 27 #Javascript
原生js实现获取form表单数据代码实例
Mar 27 #Javascript
JQueryDOM之样式操作
Mar 27 #jQuery
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 #Javascript
Node.js 多线程完全指南总结
Mar 27 #Javascript
浅谈JS和jQuery的区别
Mar 27 #jQuery
You might like
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
用 PHP5 轻松解析 XML
2006/12/04 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
配件采购员岗位职责
2013/12/03 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
解析MySQL binlog
2021/06/11 MySQL
MySQL分区表实现按月份归类
2021/11/01 MySQL
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
go goth封装第三方认证库示例详解
2022/08/14 Golang