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

Lin_R 发布于2019-08-22 16:24 / 1947人阅读

摘要：最近再写微信小程序的时候遇到需要点击地址然后调出地图进行导航的功能，研究了很长一段时间才找到解决之路，原来引入一腾讯地图的轻松解决。

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

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

GPU云服务器云服务器微信小程序支付微信小程序部署微信小程序搭建微信小程序环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94324.html

滴滴一下，小程序专车来了

摘要：功能三滴滴费用计算古人云细节决定成败，一个良好的微信小程序往往就是一些细节打动人心，居然是模仿，虽做不到百分百，至少还是很希望一模一样。最近时常感叹道：时间总是那么的快，转瞬即逝。对于像我这种刚入门的小生来讲，技术每天都在更新，框架也层出不穷，有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢，一个好的建议便是静...

SwordFly 2019-08-26 12:00 评论0 收藏0
微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

keithyau 2019-08-30 15:43 评论0 收藏0
微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

BLUE 2019-08-23 16:30 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0