微信小程序点击地址逆解析

最近再写微信小程序demo的时候遇到需要点击地址然后调出地图进行导航的功能,研究了很长一段时间才找到解决之路,原来引入一腾讯地图的API轻松解决。
效果图如下:
图片描述

图片描述

实现步骤

1.点击获取文本的内容,对文本内容进行处理,获取到需要的代码

 var addText = e.target.dataset.text;
 var addTextSplit = addText.slice(3);

2.小程序发送ajax请求

wx.request({
    url:url, //腾讯地图api地址
    header:{},//设置请求头
    success:()=>{} //请求成功处理函数
});

3.在成功处理函中解析获取到的经纬度

success:(res)=>{
    var latitude = res.data.result.location.latitude;//获取经度
    var longitude = res.data.result.location.longitude;//获取纬度
}

4.在成功处理函数中调用小程序的wx.openLocation API

wx.openLocation({
    latitude: latitude,
    longitude: longitude,
    scale: 28
});

完整代码如下:

infoTap:(e)=>{
    if (e.target.id == 'address' ){
      var addText = e.target.dataset.text;
      var addTextSplit = addText.slice(3);
      // 调用腾讯地图API,addTextSplit是文字地址描述
      var url = "http://apis.map.qq.com/ws/geocoder/v1/?address=" + addTextSplit + "&key=GMTBZ-BMUKQ-3355M-GMGWB-YVVHF-3PFTH";
      // 小程序发送请求
      wx.request({ 
        url: url,
        header:{
          'Content-Type': 'application/json'
        },
        // 请求成功处理函数
        success:(res)=>{
          // 返回经纬度
          var latitude = res.data.result.location.lat;
          var longitude = res.data.result.location.lng;
          wx.openLocation({
            latitude: latitude,
            longitude: longitude,
            scale: 28
          });
        }
      })
     });

5.小程序在进行网络请求时,在开发者环境是不进行合法域名等等的校验的,在启动项目时如果加入有appId,在发送请求时是会进行这几项的校验。运行时会报如下错误:
图片描述

6.此时需要在小程序的管理后台将此域名添加为合法域名
图片描述

7.小程序的合法域名发送的是https请求,如果请求的地址用的是http是不起作用的,同样报如下错误:
图片描述

图片描述

此时需要把请求地址的http改为https:
图片描述

小编为了这个地址修改了五次才成功的。临了最后一次实验居然成功了。庆幸庆幸!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值