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


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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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发送邮件类代码附详细说明
2008/07/10 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Nodejs模块载入运行原理
2018/02/23 NodeJs
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
django中ImageField的使用详解
2020/12/21 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
导游实习生自荐书
2014/01/28 职场文书
知识竞赛主持词
2014/03/26 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
一般党员对照检查材料
2014/09/24 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
spring boot中nativeQuery的用法
2021/07/26 Java/Android
git中cherry-pick命令的使用教程
2022/06/25 Servers
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript