微信小程序 腾讯地图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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
微信小程序实现日历效果
Dec 28 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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 header 跳转
2013/06/17 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
13个PHP函数超实用
2015/10/21 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Djang中静态文件配置方法
2015/07/30 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python之Class&Object用法详解
2019/12/25 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
如何在存储过程中使用Loop
2016/01/05 面试题
美容院经理岗位职责
2014/04/03 职场文书
主题实践活动总结
2014/05/08 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL