微信小程序 腾讯地图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 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
解决layer 动态加载select 失效的问题
Sep 18 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
用Socket发送电子邮件
2006/10/09 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
图片之间的切换
2006/06/26 Javascript
JavaScript的Function详细
2006/11/14 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
express启用https使用小记
2019/05/21 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
JS实现纸牌发牌动画
2021/01/19 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
PageFactory设计模式基于python实现
2020/04/14 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
安装工程师岗位职责
2015/02/13 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
python lambda 表达式形式分析
2022/04/03 Python