微信小程序 腾讯地图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中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript计时器详解
Feb 28 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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实现encode64编码类实例
2015/03/24 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
python中K-means算法基础知识点
2021/01/25 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
super关键字的用法
2012/04/10 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
就业协议书的作用
2014/04/11 职场文书
教师一岗双责责任书
2014/04/16 职场文书
意向协议书范本
2014/04/23 职场文书
2014年人事部工作总结
2014/12/03 职场文书
小学语文复习计划
2015/01/19 职场文书
2015年纪委工作总结
2015/05/13 职场文书
郭明义观后感
2015/06/08 职场文书
小英雄雨来观后感
2015/06/09 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
bose降噪耳机音能消除人声吗
2022/04/19 数码科技