微信小程序 腾讯地图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入门教程(7) History历史对象
Jan 31 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
详解Angular 4.x Injector
May 04 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
浅谈vue项目如何打包扔向服务器
May 08 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+mysql注射语句构造
2009/10/30 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue 运用mock数据的示例代码
2017/11/07 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python接口测试get请求过程详解
2020/02/28 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python configparser模块操作代码实例
2020/06/08 Python
python实现视频压缩功能
2020/12/18 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
为什么需要版本控制
2016/10/28 面试题
年度考核评语
2014/01/19 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python