這篇文章主要介紹了微信小程序怎么獲取地理位置和進行地圖導航 的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇微信小程序怎么獲取地理位置和進行地圖導航 文章都會有所收獲,下面我們一起來看看吧。
一.獲取地理位置
由于小程序只提供了我們一個獲取地理位置、速度的api,并沒有獲取的相關(guān)地位位置的信息等微信小程序引入地圖,我們利用百度地圖的api來獲取地位位置。
文檔
1.申請ak
2.下載百度地圖的api ,鏈接:
解壓后,里面有2個js文件,一個是常規(guī)沒壓縮的微信小程序引入地圖,另一個是壓縮過的
PS:由于小程序項目文件大小限制為1M,建議使用壓縮版的js文件!
用5kb那個js
3.引入JS模塊
放在utils下
4.在所需的js文件內(nèi)導入js
// 引用百度地圖,注意:傳入一個相對路徑
var bmap = ('../../utils/bmap-wx/bmap-wx.js');
5.編輯代碼
.wxss代碼為
經(jīng)度:{{longitude}} 緯度:{{latitude}} 地址:{{address}} 城市:{{cityInfo.city}}
.js代碼為:
var?bmap?=?requir('../../utils/bmap-wx/bmap-wx.min.js');var?wxMarkerData?=?[];?//定位成功回調(diào)對象Page({data:?{ak:?"FHG7utZtdyXN2",?//填寫申請到的akmarkers:?[],longitude:?'',?//經(jīng)度latitude:?'',?//緯度address:?'',?//地址cityInfo:?{}?//城市信息},onLoad:?function?(options)?{var?that?=?this;/*?獲取定位地理位置?*///?新建bmap對象var?BMap?=?new?bmap.BMapWX({ak:?that.data.ak});var?fail?=?function?(data)?{console.log(data);};var?success?=?function?(data)?{//返回數(shù)據(jù)內(nèi),已經(jīng)包含經(jīng)緯度console.log(data);//使用wxMarkerData獲取數(shù)據(jù)wxMarkerData?=?data.wxMarkerData;//把所有數(shù)據(jù)放在初始化data內(nèi)that.setData({markers:?wxMarkerData,latitude:?wxMarkerData[0].latitude,longitude:?wxMarkerData[0].longitude,address:?wxMarkerData[0].address,cityInfo:?data.originalData.result.addressComponent});}//?發(fā)起regeocoding檢索請求BMap.regeocoding({fail:?fail,success:?success});}?})
6.運行 注意:樓主的運行環(huán)境在模擬器上,在模擬器所獲取到的定位是有一些誤差的,如需測試真正的地理位置信息,還需要使用真機測試!!!
二.進行地圖導航
微信小程序里面是不能導航的,原因是小程序的代碼最多只能有1M,他的運行內(nèi)存只能有10M,一個區(qū)域地圖下載下來就不止1M了所以在應用內(nèi)我們無法做到導航的,但是應用外呢!
關(guān)于APP開發(fā),一般如果導航這個功能不是很重要的話就會放到應用外來做這個功能,但是高德地圖和騰訊地圖都會有響應的SDK,可是小程序不同,我們該如何在小程序外調(diào)用導航功能呢?
打開小程序中關(guān)于位置的API, 1.wx.() 獲取當前的地理位置、速度。 2.wx.() 打開地圖選擇位置。 3.wx.() 使用微信內(nèi)置地圖查看位置。
具體實現(xiàn)代碼為:
wx.getLocation({type:?'gcj02',?//返回可以用于wx.openLocation的經(jīng)緯度success:?function(res)?{var?latitude?=?res.latitudevar?longitude?=?res.longitudewx.openLocation({latitude:?latitude,longitude:?longitude,name:"長沙理工大學",scale:?28})}})
選擇手機上的地圖,然后就跳到了對應的地圖APP上,實現(xiàn)了應用外調(diào)用導航功能。
關(guān)于“微信小程序怎么獲取地理位置和進行地圖導航 ”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“微信小程序怎么獲取地理位置和進行地圖導航 ”知識都有一定的了解,大家如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。