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


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清除IE浏览器缓存的方法
Jul 26 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
js编写的treeview使用方法
Nov 11 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
javascript实现页面的实时时钟显示示例
Aug 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随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python之os操作方法(详解)
2017/06/15 Python
python 内置模块详解
2019/01/01 Python
python分数表示方式和写法
2019/06/26 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python request 模块详细介绍
2020/11/10 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
设备管理实施方案
2014/05/31 职场文书
2014年宣传工作总结
2014/11/18 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
拉贝日记观后感
2015/06/05 职场文书
水浒传读书笔记
2015/06/25 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python