微信小程序 腾讯地图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的parseInt 进制问题
May 07 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
js控制input框只读实现示例
Jan 20 Javascript
js document.write()使用介绍
Feb 21 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
如何更好的编写js async函数
May 13 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue滚动插件better-scroll使用详解
Oct 18 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
jQuery技巧总结
2011/01/01 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python config文件的读写操作示例
2019/09/27 Python
Python读取实时数据流示例
2019/12/02 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Python内置异常类型全面汇总
2020/05/28 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
幼儿园中班评语大全
2014/04/17 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS