微信小程序 腾讯地图SDK 获取当前地址实现解析


Posted in Javascript onAugust 12, 2019

如何获取用户当前地址,这个就要先用到小程序的定位功能:定位官方文档

第一步获取当前定位

在js当中写

微信小程序 腾讯地图SDK 获取当前地址实现解析

运行项目之后会有个这样的弹窗:

微信小程序 腾讯地图SDK 获取当前地址实现解析

这是因为开发者需要说明获取用户地理位置的用途。

解决方法:

在app.json中增加permission属性。

微信小程序 腾讯地图SDK 获取当前地址实现解析

这样就可以获取到用户的地理坐标了。

第二步讲当前定位转换程地址信息

这个功能需要用到腾讯地图SDK:官方文档

官方文档上使用SDK的步骤写的挺详细的,还带上了各种链接:

微信小程序 腾讯地图SDK 获取当前地址实现解析

第4步的安全域名设置在你自己的小程序管理后台里设置

以上4步都完成后,将下载好的SDK文件放到项目里。

在页面js里引入SDK:

微信小程序 腾讯地图SDK 获取当前地址实现解析

我们需要用到的是SKD里面的reverseGeocoder()方法,所以我们在获取到用户当前坐标后调用这个方法:

微信小程序 腾讯地图SDK 获取当前地址实现解析

这样就将地址坐标转换成了地址,在页面上简单展示出来:

微信小程序 腾讯地图SDK 获取当前地址实现解析

微信小程序 腾讯地图SDK 获取当前地址实现解析

完整代码

最后贴上我的js完整代码,写的有点小??铝耍?绻?惺裁床惶??牡胤交队?游?q一起讨论下:546529770,谢谢~~

js

/**引入SDK核心类 */
var qqSDK = require('../../apis/qqmap-wx-jssdk.min.js')

Page({

 /**
  * 页面的初始数据
  */
 data: {
  latitude: '',
  longitude: '',
  positionData: ''
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
  var _this = this

  /**实例化SDK核心类 */
  var qqMap = new qqSDK({
   key: '3B4BZ-QHNK3-HLX34-YKUQA-YDHCV-CHFFB' //必填
  });

  /**获取当前坐标 */
  wx.getLocation({
   success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    qqMap.reverseGeocoder({
     success: function(res) {
      var address = res.result.address;
      _this.setData({
       latitude: latitude,
       longitude: longitude,
       positionData: address
      });
     }
    })
   }
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
ElementUI radio组件选中小改造
Aug 12 #Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 #Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 #Javascript
react实现antd线上主题动态切换功能
Aug 12 #Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 #Javascript
You might like
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php实现天干地支计算器示例
2014/03/14 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php生成验证码函数
2015/10/20 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
JS实现判断移动端PC端功能
2020/02/21 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
保险公司年会主持词
2014/03/22 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
军人离婚协议书样本
2014/10/21 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
在python中读取和写入CSV文件详情
2022/06/28 Python