微信小程序點擊地址逆解析

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

小編爲了這個地址修改了五次才成功的。臨了最後一次實驗竟然成功了。慶幸慶幸！