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


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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
ie focus bug 解决方法
Sep 03 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
Highcharts入门之简介
Aug 02 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
原生JS中应该禁止出现的写法
May 05 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
详解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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
学习十八大演讲稿
2014/09/15 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python