實現效果

很多小程式都有如下需求：

小程式開啟後，以文字形式顯示使用者所在位置，如果使用者覺得不準，可以開啟地圖，在地圖上自己選擇位置，選擇完成後，顯示的使用者的位置會發生變化

點選地址選擇地點

選擇地點之後

原始碼實現

下面不僅僅是原始碼，還希望通過原始碼儘量講解小程式的相關知識

檢視 index.wxml

index.wxml:

<view class='address' bindtap='onChangeAddress'>
      {{address}}
 </view>

view 元件可用作父容器，也可以用來展示一段文字，text元件也可以用來展示文字，區別在於view中的文字不能選中。

{{}} 是小程式中資料繫結的語法。在小程式中沒有 dom 和 bom，所以不能根據id等屬性獲取控制元件，只能通過資料繫結的方式。

在index.js 中未變數 addresss 賦值，然後 index.wxml 中就可以自動更新，這與 angular 很像，但是，小程式中是單項繫結。

tap 是一個觸控事件，小程式中使用 bind 或者 catch 方式繫結事件，其屬性值是一個函式名稱，這個函式在 index.js 中定義，當用戶觸控此 view 時就會執行對應的函式

邏輯層 index.js

//引用騰訊地圖API
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'
 
);
var qqmapsdk;
Page({
  /**
   * 頁面的初始資料
   */
  data: {
    address: "",
    src:""
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    /*判斷是第一次載入還是從position頁面返回
    如果從position頁面返回，會傳遞使用者選擇的地點*/
    if (options.address != null && options.address != '') {
      //設定變數 address 的值
 

      this.setData({
        address: options.address
      });
    } else {
      // 例項化API核心類
      qqmapsdk = new QQMapWX({
        //此key需要使用者自己申請
        key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'
      });
      var that = this;
      // 呼叫介面
      qqmapsdk.reverseGeocoder({
        success: function (res) {
          that.setData({
            address: res.result.address
          });
        },
        fail: function (res) {
          //console.log(res);
        },
        complete: function (res) {
          //console.log(res);
        }
      });
    }
  }

index.js 中的所有程式碼都應該放在 page 函式中

其中 onLoad 函式是內建函式，大致相當於 js 中的 window.onload 函式。

如果是其他頁面跳轉過來，並且通過 問號的方式傳遞引數過來，可以使用 options.引數名稱獲取對應的值。

qqmapsdk.reverseGeocoder

這裡用到了騰訊地圖小程式客戶端API，上面的函式就是API中的一個，作用是提供由座標到座標所在位置的文字描述的轉換，輸入座標返回地理位置資訊和附近poi列表。具體的使用方法參見官網，這裡就不做贅述了，官網地址: 點選開啟連結

呼叫成功之後獲取地址並賦值給變數 address

這裡要注意，必須通過 setData() 函式設定變數的資料，檢視中才可以更新

在地圖中選擇位置

如果使用者覺得定位不準，可以點選 位置資訊，開啟地圖頁面，程式碼如下

onChangeAddress: function (e) {
    wx.navigateTo({
      url: "/pages/position/position"
    });
  }

wx.navigateTo 函式用於跳轉到其他頁面，可以在url 值後面以 ?引數名=引數值 的方式傳遞引數

position.wxml:

<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" show-location></map>
  </view>
</view>

map 是小程式中的元件，用於顯示地圖資訊，屬性 latitude 和 longitude 用於設定地圖的中心點

下面是 position.js 完整程式碼

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  data: {
    latitude: 0,//地圖初次載入時的緯度座標
    longitude: 0, //地圖初次載入時的經度座標
    name:"" //選擇的位置名稱
  },
  onLoad: function () {
    // 例項化API核心類
    qqmapsdk = new QQMapWX({
      key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'
    });
   
    this.moveToLocation();   
  },
  //移動選點
  moveToLocation: function () {
    var that = this;
    wx.chooseLocation({
      success: function (res) {    
        console.log(res.name);    
        //選擇地點之後返回到原來頁面
        wx.navigateTo({
          url: "/pages/index/index?address="+res.name
        });
      },
      fail: function (err) {
        console.log(err)
      }
    });
  }
});

wx.chooseLocation 方法，會開啟地圖，並且預設以使用者當前位置為中心點。並且會在下面展示周圍一些地點列表，供使用者選擇，使用者選擇完地點後，點選 完成，會觸發 其 success 引數指定的函式，可以通過引數 res獲取地點名稱、經緯度等相關資訊

在這裡，獲取當相關資訊後跳轉到主頁，同時將使用者選擇的位置名稱傳遞過去

在 index.wxml 中，有一段程式碼用來處理：如果使用者在點選 完成 前沒有選擇任何位置，則繼續顯示當前位置，否則顯示使用者選擇的位置。

/*判斷是第一次載入還是從position頁面返回
    如果從position頁面返回，會傳遞使用者選擇的地點*/
    if (options.address != null && options.address != '') {
      //設定變數 address 的值
      this.setData({
        address: options.address
      });