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

最近再写微信小程序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:
微信小程序点击地址逆解析

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

相关推荐