在微信小程式中，我們可以很方便的通過API介面來獲取我們當前的位置，接下來我講告訴大家微信獲取定位的API—wx.getLocation的用法，以及我們通過獲取定位，得到當地的位置，天氣等資訊。在微信小程式中，我們可以很方便的通過API介面來獲取我們當前的位置，接下來我講告訴大家微信獲取定位的API—wx.getLocation的用法，以及我們通過獲取定位，得到當地的位置，天氣等資訊。

<view class='content'>
  <view class='today'>
    <view class='info'>
      <view class='temp'>{{weather.temperature.data}}℃</view>
      <view class='weather'>{{weather.weather.data}} {{weather.winddirection.data}} {{weather.windpower.data}}</view>
      <view>友情提示：今天天氣不錯，是風和日麗的，適合出去玩</view>
      <view class='city'>{{weather.city.data}}</view>
    </view>
  </view>
</view>
 

首先給出我的前端程式碼，中括號內的變數就是我們下文中從高德地圖返回給我們的json陣列中解析出來的。下面讓我們來看一下我們如何獲得當前的定位以及獲取高德地圖給我們的資訊。

//獲取當前位置的經緯度
  loadInfo: function(){
    var that=this;
    wx.getLocation({
      type: 'gcj02', //返回可以用於wx.openLocation的經緯度
      success: function (res) {
        var latitude = res.latitude//維度
        var longitude = res.longitude//經度
        console.log(res);
        that.loadCity(latitude,longitude);
      }
    })
  },
 

其實獲取定位很簡單，我們直接呼叫微信的介面wx.getLocation,結果會返回給我們一個json陣列，結果就像上圖一樣，陣列中包含各種屬性，我們最需要的就是經度(longitude)和緯度(latitude)，我們獲得了當前位置的經緯度就可以呼叫高德地圖的API，把我們的經緯度傳上去，之後就能夠獲得高德地圖給我們返回的資訊。

首先我們需要從高德地圖的官網上下載一個微信小程式SDK http://lbs.amap.com/api/wx/download 在建立的專案中，新建一個名為 libs 目錄，將 amap-wx.js （amap-wx.js 從下載的 zip 檔案解壓後得到）檔案拷貝到 libs 的本地目錄下，如下圖所示。

接下來我們需要在頁面的js檔案中配置我們需要操作的資料

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
  latitude: '',//緯度
  longitude: '',//經度
  key: "需要去高德地圖註冊成為開發者，然後就會獲得一個key"//申請的高德地圖key
};

好了，我們配置好外部檔案以後，就可以在js裡面寫邏輯了，下面貼出我的js程式碼。

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
  latitude: '',//緯度
  longitude: '',//經度
  key: "高德地圖key"//申請的高德地圖key
};
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    weather:[],
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    this.loadInfo();
  },


  //獲取當前位置的經緯度
  loadInfo: function(){
    var that=this;
    wx.getLocation({
      type: 'gcj02', //返回可以用於wx.openLocation的經緯度
      success: function (res) {
        var latitude = res.latitude//維度
        var longitude = res.longitude//經度
        console.log(res);
        that.loadCity(latitude,longitude);
      }
    })
  },

  //把當前位置的經緯度傳給高德地圖，呼叫高德API獲取當前地理位置，天氣情況等資訊
  loadCity: function (latitude, longitude){
    var that=this;
    var myAmapFun = new amapFile.AMapWX({ key: markersData.key });
    myAmapFun.getRegeo({
      location: '' + longitude + ',' + latitude + '',//location的格式為'經度,緯度'
      success: function (data) {
        console.log(data);
      },
      fail: function (info) { }
    });

    myAmapFun.getWeather({
      success: function (data) {
        that.setData({
          weather: data
        })
        console.log(data);
        //成功回撥
      },
      fail: function (info) {
        //失敗回撥
        console.log(info)
      }
    })
  },


})

我們在onload函式中獲取當前的定位，我們把經緯度資訊傳遞給myAmapFun.getRegeo方法中的location引數，接下來我們可以看看高德地圖給我們返回的資訊。 我們獲取了我們的位置以及郵政編碼等一系列資訊，大家可以去高德地圖上註冊一個開發者，得到一個key，然後測試一下，也可以獲得你們當地的資訊。

我們再看一下myAmapFun.getWeather給我們返回的天氣資訊。 我們順利得到了我們當地的天氣資訊，然後再把這些資訊顯示在我們的wxml介面就行了，大家注意一下圖片中的屬性，然後再看一下wxml中括號內的變數，就可以知道講json陣列的某些屬性的值如何傳到前端了。有一個細節就是我把myAmapFun.getWeather方法返回的data陣列傳給了我在全域性data中定義的weather陣列，這樣我們在前端就可以通過上文wxml中的方法來顯示陣列中的值。

文章的末尾還是要強調一下，本次測試需要開發者自己去高德地圖官網註冊開發者賬號，然後獲取自己的key，並且需要下載高德地圖提供給我們的微信小程式SDK，接著在專案中配置解壓後的js檔案，最後我們就可以像上文那樣去使用高德地圖的介面了。