微信小程序 腾讯地图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 相关文章推荐
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JS重载实现方法分析
Dec 16 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
实现一个简单得数据响应系统
Nov 11 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 getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
vue2.0 路由模式mode="history"的作用
2018/10/18 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python hook监听事件详解
2018/10/25 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python列表(List)知识点总结
2019/02/18 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django中的session用法详解
2020/03/09 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
幼儿园保育员随笔
2015/08/14 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
利用js实现简单开关灯代码
2021/11/23 Javascript
详解Python内置模块Collections
2022/03/22 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript