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


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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
jquery text()要注意啦
Oct 30 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
详解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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php分页示例代码
2007/03/19 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
jquery获取节点名称
2015/04/26 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
Python中super的用法实例
2015/05/28 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python中logging日志库实例详解
2020/02/19 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
教师节倡议书
2014/08/30 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2014年防汛工作总结
2014/12/08 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
javascript函数式编程基础
2021/09/15 Javascript
MySQL连接控制插件介绍
2021/09/25 MySQL
JAVA springCloud项目搭建流程
2022/05/11 Java/Android