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


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 Select标记中options操作方法集合
Oct 22 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
javascript学习小结之prototype
Dec 03 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
prototype 学习笔记整理
2009/07/17 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python中几种导入模块的方式总结
2017/04/27 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python学习开发mock接口
2019/04/28 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
shell程序中如何注释
2012/02/17 面试题
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
高中生活自我鉴定
2014/01/18 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
导师鉴定意见
2015/06/05 职场文书