微信小程序 腾讯地图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实现点击链接弹出"图片另存为"而不是直接打开
Aug 15 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
angular动态表单制作
Feb 23 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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
Phpbean路由转发的php代码
2008/01/10 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
js计数器代码
2006/11/04 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
python PIL模块的基本使用
2020/09/29 Python
python help函数实例用法
2020/12/06 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
2014年质量工作总结
2014/11/22 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers