微信小程序点击地址逆解析
最近再写微信小程序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:
小编为了这个地址修改了五次才成功的。临了最后一次实验居然成功了。庆幸庆幸!
相关推荐
kgshuo 2020-09-25
Tomato 2020-09-10
taiyangyu 2020-09-10
CodeAndroid 2020-09-10
small 2020-07-29
sucheng 2020-07-26
zuoliangzhu 2020-07-20
CodeAndroid 2020-07-14
xiaoxubbs 2020-07-04
sucheng 2020-06-25
kgshuo 2020-06-14
意外金喜 2020-06-14
zuoliangzhu 2020-06-14
tianping 2020-06-14
hgzhang 2020-06-14
killgod 2020-06-14
戴翔的技术 2020-06-14
郴州小程序 2020-06-13