mpvue小程序開發之 城市定位

背景：

在進行小程序開發時，有一個定位城市的需求，下面就來說講怎麼實現這個功能的吧

解決方案：

小程序的wx.getLocation()得到是經緯度並不包含地名，因此要經過經緯度用相應的地圖轉換出地名（本文使用的是百度地圖）。

    /* 微信獲取城市定位 */
      wx.getLocation({
        type: 'wgs84',
        success(res) {
            const latitude = res.latitude
            const longitude = res.longitude
            const speed = res.speed
            const accuracy = res.accuracy
            console.log('-d---------------------')
            console.log(res)
            scope.getCityInfo(latitude,longitude)
        }
        })

1.1代碼詳解

　wx.getLocation(object)：獲取當前的地理位置、速度。注意：須要用戶受權地理定位權限。

　　　　詳細參數說明請查看小程序API：https://developers.weixin.qq.com/miniprogram/dev/api/location.html#wxgetlocationobject

 咱們看看wx.getLocation()成功後得到到的數據：

從得到到的數據咱們能夠看到並無咱們想要的地名，所以就須要咱們把經緯度轉換成相應的地名，本文使用的是百度地圖相應功能轉換出相應地名。

1.2  百度地圖的準備工做

1.在使用百度地圖API以前，首先要得到百度地圖的密鑰ak，ak由百度地圖方生成；

　　　　2.打開百度地圖開放平臺，導航欄處選擇 「開發文檔」 > 「微信小程序JavaScript API」，在「入門指南」處有詳細介紹怎麼生成密鑰ak，本文再也不介紹。

　　　　　　參考文檔：http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

　　　　3.複製生成好的ak,把ak粘貼到小程序中。其實，百度地圖有提供小程序使用的地圖api的壓縮包，可是出於小程序發佈時對大小的限制，我選擇了使用連接。

　　　　　　百度地圖線上轉換連接地址：https://api.map.baidu.com/geocoder/v2/?ak=得到的AK&location=' + latitude + ',' + longitude + '&output=json'

　　　　4.使用小程序的帳號登陸微信公衆平臺(https://mp.weixin.qq.com/)，在「設置」 中選擇 「開發設置」，把百度地圖api的url添加到request合法域名中。

　　　　　注意：百度地圖提供的有關於小程序API的下載包，不想使用連接地址的可使用下載包，出於小程序發佈時對大小的限制，本文使用的是連接地址未使用下載包。

   /* 逆向地理編碼 */
    getCityInfo(latitude,longitude){
      let scope=this;
      wx.request({
        url:'http://api.map.baidu.com/geocoder/v2/?location='+latitude+','+longitude+'&output=json&pois=1&ak=',
        data:{},
        header:{
          'Content-Type':"application/json"
        },
        success:function(res){
          if(res&&res.data){
            console.log(res);
            scope.cityName=res.data.result.addressComponent.city;
            scope.getCommunity();
            
            console.log(res.data.result.addressComponent.city)
          }else{
            console.log('獲取失敗')
          }
        }
      })