摘要:最近再寫微信小程序的時候遇到需要點擊地址然后調出地圖進行導航的功能,研究了很長一段時間才找到解決之路,原來引入一騰訊地圖的輕松解決。
最近再寫微信小程序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:
小編為了這個地址修改了五次才成功的。臨了最后一次實驗居然成功了。慶幸慶幸!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94324.html
摘要:功能三滴滴費用計算古人云細節決定成敗,一個良好的微信小程序往往就是一些細節打動人心,居然是模仿,雖做不到百分百,至少還是很希望一模一樣。 最近時常感嘆道:時間總是那么的快,轉瞬即逝。對于像我這種剛入門的小生來講,技術每天都在更新,框架也層出不窮,有時候還沒弄懂這個知識大牛們又推出了更好的技術。當然學習好的技術也是十分重要的。但是在學習之后怎樣才能夠得到自己想要的呢,一個好的建議便是靜...
摘要:業內開發框架層出不窮,,,等等,都在朝著更快,更強大的方向發展,有統一微信支付寶百度和頭條小程序的大趨勢。最近升級為版本,支持微信支付寶百度和頭條小程序。 原文鏈接 最近小程序的發展越來越火了,作為各個產品線的extra服務入口,以輕便、快速、強大的社交鏈吸引著大量的用戶和開發者。業內開發框架層出不窮,wepy,mpvue,taro等等,都在朝著更快,更強大的方向發展,有統一 H5、微...
摘要:業內開發框架層出不窮,,,等等,都在朝著更快,更強大的方向發展,有統一微信支付寶百度和頭條小程序的大趨勢。最近升級為版本,支持微信支付寶百度和頭條小程序。 原文鏈接 最近小程序的發展越來越火了,作為各個產品線的extra服務入口,以輕便、快速、強大的社交鏈吸引著大量的用戶和開發者。業內開發框架層出不窮,wepy,mpvue,taro等等,都在朝著更快,更強大的方向發展,有統一 H5、微...
摘要:微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源,方便查閱和學習,歡迎大家提交新的資源,完善和補充。 wechat-weapp-resource 微信應用號(小程序)資源匯總。 每天不定期整理和收集微信小程序相關資源,方便查閱和學習,歡迎大家提交新的資源,完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
閱讀 2666·2023-04-26 02:44
閱讀 8511·2021-11-22 14:44
閱讀 2125·2021-09-27 13:36
閱讀 2494·2021-09-08 10:43
閱讀 681·2019-08-30 15:56
閱讀 1396·2019-08-30 15:55
閱讀 2890·2019-08-28 18:12
閱讀 2832·2019-08-26 13:50