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


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 自动完成脚本整理(33个)
Oct 20 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
angularjs实现简单的购物车功能
Sep 21 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
JS实现滑动导航效果
Jan 14 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 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显示MySQL数据的三种方法
2008/06/05 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php验证手机号码
2015/11/11 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python通过post提交数据的方法
2015/05/06 Python
python实现识别相似图片小结
2016/02/22 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python绘制彩虹图
2019/12/16 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
行政副总岗位职责
2014/02/23 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android