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

发布时间:2019-06-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序点击地址逆解析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

最近再写微信小程序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:

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序点击地址逆解析全部内容,希望文章能够帮你解决微信小程序点击地址逆解析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。