最近再写微信小程序demo的时候遇到须要点击地址而后调出地图进行导航的功能,研究了很长一段时间才找到解决之路,原来引入一腾讯地图的API轻松解决。
效果图以下:git
1.点击获取文本的内容,对文本内容进行处理,获取到须要的代码ajax
var addText = e.target.dataset.text; var addTextSplit = addText.slice(3);
2.小程序发送ajax请求json
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 });
完整代码以下:api
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是不起做用的,一样报以下错误:app
此时须要把请求地址的http改成https:函数
小编为了这个地址修改了五次才成功的。临了最后一次实验竟然成功了。庆幸庆幸!