序言
今天給大家分享下小程序如何獲取用戶的城市定位。基本每個生活服務的應用都有這種類似場景,通過用戶的當前位置,就可以實現周邊的路線、美食等場景,典型的例子有高德地圖中的導航、餓了麼的定位等。那小程序怎麼實現獲取用戶的城市定位呢,這就得看看如何運用百度
API
與小程序的API
來實現這一功能。
小程序的API
wx.getLocation
獲取用戶的地理位置、速度。參考
api
,裏面的參數type
來獲取座標;altitude
是否獲取經緯度;以及回調函數的使用等。返回值比較詳細些,經度、緯度、速度以及高度等等。
wx.openLocation
這個
API
會打開微信內置地圖, 選擇座標。 打開地圖選擇位置。通過上面那個API
-wx.getLocation
獲取name
位置名稱、address
詳細位置、longitude
經度、latitude
維度來作爲openLocation
的參數。
wx.chooseLocation
利用地圖選擇位置,展示位置周邊的場景。
百度API
然而,微信小程序的
api
上並沒有獲取國家或者城市信息,那要像微信朋友圈那樣的帖子下面顯示城市信息的話,還是得藉助第三方的地圖api
,我在這裏給各位老鐵介紹下百度地圖api
的示例。
1.訪問百度地圖api(http://lbsyun.baidu.com/)
找到【開發文檔】-【服務接口】-【web
服務】-【地理解碼】,可以實現通過經緯度返回城市信息;也可以通過城市信息返回經緯度。
2.申請token
有幾個步驟分別是:【申請百度賬號】-【申請開發者】-【獲取服務祕鑰】。這幾個步驟執行完後,便繼續進行祕鑰的獲取。
這裏的應用類型應該輸入微信小程序,而且APPID也應該是微信公衆號後臺的開發者ID,相當於白名單。提交之後,也就能看到自己申請的Token信息。
開發流程
第一步,我們來獲取經緯度信息
getGeo(e){ wx.getLocation({ success: geo => { console.log(geo); } }
我們可以從圖中獲取到,經緯度、速度等具體數據。不過我們現在只需要latitude
與longitude
這兩個作爲參數去獲取城市信息。
第二步,獲取城市信息
將從百度API
這邊得到的token
賦給一個變量ak
定義好。接着從【全球逆地理編碼】-【服務文檔】中,找到我們需要的接口http://api.map.baidu.com/geocoder/v2/
getGeo(){ let ak='微信小程序的APPID'; let url='百度提供的地理編碼接口 '; wx.getLocation({ type: 'wgs84', success: geo => { wx.request({ url, data:{ ak, output:'json', location:`${geo.latitude},${geo.longitude}` }, success:(res)=>{console.log(res) if (res.data.status === 0) { this.location = res.data.result.addressComponent.city } else { this.location = '未知地點' } } }) }
在進行編碼過程中,ak
與url
的獲取是唯一且固定的;通過參考百度API
的接口調用方式,可以對功能接口進行調用。
通過小程序的API
-wx.chooseLocation
與第三方地圖API
的結合,可以獲取到當前的城市信息,包括位置名稱、詳細地址等。
另一方面,通過chooseLocation
可以打開地圖並選擇周邊的位置。
結語
通過對小程序地圖API
與百度地圖API
的掌握,可以很輕鬆地實現地圖定位功能,結合這篇文章我們也可以拓展實現類似微信朋友圈的地理信息定位等功能。當然這裏會遇到幾個坑位:
- 百度地圖
API
創建應用時需要注意白名單的APPID
,得與自己打開項目的註冊APPID
匹配; - 由於本地開發是會遇到跨域問題無法調用
http://api.map.baidu.com/
,因此我們需要在開發者工具上點擊右上角的【詳情】,將【不校驗域名、…】這個欄目勾上,這樣就能夠進行API
調用了。