微信小程序 腾讯地图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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php进程间通讯实例分析
2016/07/11 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JS常用函数使用指南
2014/11/23 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python生成器实现简单"生产者消费者"模型代码实例
2020/03/27 Python
Python requests上传文件实现步骤
2020/09/15 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
思想政治自我鉴定
2013/10/06 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
钱学森电影观后感
2015/06/04 职场文书
教师读书笔记
2015/06/29 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python