微信小程序——获取地址信息(一),腾讯地图篇

小程序对获取用户地址信息的需求是很常见的,小程序官方也给出了一些关于获取位置的api,但是只支持获取经纬度,大多数时候我们需要获取到用户的具体地址,而不是一堆数字。实现这个功能就需要借助外部力量了。

目前国内主流的腾讯地图、百度地图、高德地图都提供了支持小程序开发的JavaScript SDK,我们可以通过使用这些sdk来达到我们的目标。

首先介绍腾讯地图吧。

进入腾讯地图开发者平台可以直接搜索腾讯地图开发者平台,或点击这个链接:http://lbs.qq.com/index.html 进入首页,注册账号,点击快速入门—>介入指引,按步骤完成邮箱验证,并申请开发秘钥key。如下图

账号申请完成后,回到首页,选择产品—>微信小程序JavaScriptSDK,点击下载,将解压的文件复制到需要使用的小程序目录下,建议新建一个目录。这样前期准备完成,开始使用。

要使用这个SDK,我们要现在页面引入,用require引入就好,注意文件的路径要写对。代码:

var qqMap=require('../../mapLib/qqmap-wx-jssdk.min.js');

接下来获取位置,代码如下:

var qmapSDK;
getLocation:function(e){
    var that=this;
    //初始化
    qmapSDK = new qqMap({
      key: '你申请的key'
    })
    //获取地址
    wx.getLocation({
      success: function(res) {
        type:'wgs84'
        qmapSDK.reverseGeocoder({
          location:{
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function(e){
            var location = e.result.address;
            that.setData({
              location: location
            })
          }
        })  
      },
    })
  },

我们通过小程序的wx.getLocation 获取到用户当前位置的经纬度, 调用腾讯地图的reverseGeocoder方法,传入经纬度,success函数来接收位置信息。

其实,不仅仅只有result.address返回值是位置的具体信息,我们可以通过打印success函数的返回值来查看,运行结果如下图:

 通过查看这些返回值,我们可以很容易地实现另外的功能,比如只需要获取当前市,或者当前街道等,腾讯位置服务官网也详细介绍了每个返回值,大家可以灵活运用。

 

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,我会尽力回答你的问题。首先,获取用户位置需要在小程序中使用微信提供的API,具体步骤如下: 1. 引入API ``` // 在页面的JS文件中引入API const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); ``` 2. 初始化API ``` // 在页面的JS文件中初始化API const qqmapsdk = new QQMapWX({ key: '你的腾讯地图开发者密钥' }); ``` 3. 获取用户位置 ``` // 在页面的JS文件中获取用户位置 wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude; const longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude, longitude }, success(res) { console.log(res); } }); }, fail(res) { console.log(res); } }); ``` 接下来是异常流处理的完整示例: ``` // 在页面的JS文件中引入API const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); // 在页面的JS文件中初始化API const qqmapsdk = new QQMapWX({ key: '你的腾讯地图开发者密钥' }); // 在页面的JS文件中获取用户位置 wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude; const longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude, longitude }, success(res) { console.log(res); }, fail(res) { console.log(res); wx.showToast({ title: '获取位置失败', icon: 'none' }); } }); }, fail(res) { console.log(res); wx.showModal({ title: '提示', content: '获取位置失败,请检查是否开启定位权限', showCancel: false, confirmText: '知道了' }); } }); ``` 在这个示例中,我们通过`wx.getLocation`方法获取用户位置,并且使用`qqmapsdk.reverseGeocoder`方法将经纬度转换为详细地址信息。如果获取位置或转换地址信息失败,我们会使用`wx.showToast`或`wx.showModal`方法提醒用户。这就是异常流处理的完整示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值