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


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正则控制input标签只允许输入的值
Jul 29 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
vue-music关于Player播放器组件详解
Nov 28 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
React中使用UMEditor的方法示例
Dec 27 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设计模式之单例模式使用示例
2014/01/20 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
python实现kNN算法
2017/12/20 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
自我介绍演讲稿
2014/01/15 职场文书
光盘行动倡议书
2014/02/02 职场文书
士力架广告词
2014/03/20 职场文书
付款委托书范本
2014/04/04 职场文书
党员服务承诺书
2014/05/28 职场文书
品牌推广策划方案
2014/05/28 职场文书
节水口号标语
2014/06/19 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
PO模式在selenium自动化测试框架的优势
2022/03/20 Python