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


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类和继承 constructor属性
Mar 04 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
js+css实现select的美化效果
Mar 24 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
关于Vue Router的10条高级技巧总结
May 06 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
PHP图片上传类带图片显示
2006/11/25 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python中的引用知识点总结
2019/05/20 Python
python编写猜数字小游戏
2019/10/06 Python
在Python中实现字典反转案例
2020/12/05 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
德国购买门票网站:ADticket.de
2019/10/31 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
实习生求职自荐信
2014/02/07 职场文书
2016中秋节广告语
2016/01/28 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书