微信小程序 腾讯地图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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
微信小程序实现文字跑马灯
May 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
python实现大学人员管理系统
2019/10/25 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
2014年创先争优工作总结
2014/12/11 职场文书
优秀班主任申报材料
2014/12/16 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
七年级作文之英语老师
2019/10/28 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
java调用Restful接口的三种方法
2021/08/23 Java/Android
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技