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


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记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
在JavaScript中如何使用宏详解
May 06 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
php引用地址改变变量值的问题
2012/03/23 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python实现上传下载文件功能
2020/11/19 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
解决yum对python依赖版本问题
2019/07/05 Python
python logging日志模块原理及操作解析
2019/10/12 Python
通过python检测字符串的字母
2020/02/18 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
医科大学生的自我评价
2013/12/04 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
安全生产标语
2014/06/06 职场文书
终止劳动合同协议书
2014/10/05 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL