微信小程序 腾讯地图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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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个人网站架设连环讲(三)
2006/10/09 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php无限遍历目录示例
2014/02/21 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
AJAX的使用方法详解
2017/04/29 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
同学聚会主持词
2014/03/18 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS