小程序不能定位城市怎麼辦？

序言

今天給大家分享下小程序如何獲取用戶的城市定位。基本每個生活服務的應用都有這種類似場景，通過用戶的當前位置，就可以實現周邊的路線、美食等場景，典型的例子有高德地圖中的導航、餓了麼的定位等。那小程序怎麼實現獲取用戶的城市定位呢，這就得看看如何運用百度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的掌握，可以很輕鬆地實現地圖定位功能，結合這篇文章我們也可以拓展實現類似微信朋友圈的地理信息定位等功能。當然這裏會遇到幾個坑位：

1. 百度地圖API創建應用時需要注意白名單的APPID，得與自己打開項目的註冊APPID匹配；
2. 由於本地開發是會遇到跨域問題無法調用http://api.map.baidu.com/,因此我們需要在開發者工具上點擊右上角的【詳情】，將【不校驗域名、…】這個欄目勾上，這樣就能夠進行API調用了。