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


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与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
vue props 一次传多个值实例
Jul 22 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP面向对象法则
2012/02/23 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python中实现的RC4算法
2015/02/14 Python
python自定义异常实例详解
2017/07/11 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python实现人机五子棋
2020/03/25 Python
python右对齐的实例方法
2020/07/05 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
物流司机岗位职责
2013/12/28 职场文书
物流创业计划书
2014/02/01 职场文书
安全宣传标语口号
2014/06/06 职场文书
安全施工标语
2014/06/07 职场文书
英文商务邀请函范文
2015/01/31 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android