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


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管中窥豹 形参与实参浅析
Dec 17 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
详解js前端代码异常监控
Jan 11 Javascript
浅谈js闭包理解
Mar 28 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
小程序实现tab标签页
Nov 16 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
了解JavaScript函数中的默认参数
2019/05/30 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python编写单元测试代码实例
2020/09/10 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
廉洁教育学习材料
2014/05/19 职场文书
教室布置标语
2014/06/26 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL