小程序模板網(wǎng)

微信小程序地圖上選擇位置

發(fā)布時(shí)間:2018-05-16 15:54 所屬欄目:小程序開發(fā)教程

實(shí)現(xiàn)效果

很多小程序都有如下需求:

小程序打開后,以文字形式顯示用戶所在位置,如果用戶覺得不準(zhǔn),可以打開地圖,在地圖上自己選擇位置,選擇完成后,顯示的用戶的位置會(huì)發(fā)生變化

點(diǎn)擊地址選擇地點(diǎn)

選擇地點(diǎn)之后

源碼實(shí)現(xiàn)

下面不僅僅是源碼,還希望通過源碼盡量講解小程序的相關(guān)知識(shí)

視圖 index.wxml

index.wxml:


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

view 組件可用作父容器,也可以用來展示一段文本,text組件也可以用來展示文本,區(qū)別在于view中的文本不能選中。

{{}} 是小程序中數(shù)據(jù)綁定的語法。在小程序中沒有 dom 和 bom,所以不能根據(jù)id等屬性獲取控件,只能通過數(shù)據(jù)綁定的方式。

在index.js 中未變量 addresss 賦值,然后 index.wxml 中就可以自動(dòng)更新,這與 angular 很像,但是,小程序中是單項(xiàng)綁定。

tap 是一個(gè)觸摸事件,小程序中使用 bind 或者 catch 方式綁定事件,其屬性值是一個(gè)函數(shù)名稱,這個(gè)函數(shù)在 index.js 中定義,當(dāng)用戶觸摸此 view 時(shí)就會(huì)執(zhí)行對(duì)應(yīng)的函數(shù)

邏輯層 index.js


//引用騰訊地圖API
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    address: "",
    src:""
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    /*判斷是第一次加載還是從position頁面返回
    如果從position頁面返回,會(huì)傳遞用戶選擇的地點(diǎn)*/
    if (options.address != null && options.address != '') {
      //設(shè)置變量 address 的值
      this.setData({
        address: options.address
      });
    } else {
      // 實(shí)例化API核心類
      qqmapsdk = new QQMapWX({
        //此key需要用戶自己申請(qǐng)
        key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'
      });
      var that = this;
      // 調(diào)用接口
      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 中的所有代碼都應(yīng)該放在 page 函數(shù)中

其中 onLoad 函數(shù)是內(nèi)置函數(shù),大致相當(dāng)于 js 中的 window.onload 函數(shù)。

如果是其他頁面跳轉(zhuǎn)過來,并且通過 問號(hào)的方式傳遞參數(shù)過來,可以使用 options.參數(shù)名稱獲取對(duì)應(yīng)的值。

qqmapsdk.reverseGeocoder

這里用到了騰訊地圖小程序客戶端API,上面的函數(shù)就是API中的一個(gè),作用是提供由坐標(biāo)到坐標(biāo)所在位置的文字描述的轉(zhuǎn)換,輸入坐標(biāo)返回地理位置信息和附近poi列表。具體的使用方法參見官網(wǎng),這里就不做贅述了,官網(wǎng)地址: 點(diǎn)擊打開鏈接

調(diào)用成功之后獲取地址并賦值給變量 address

這里要注意,必須通過 setData() 函數(shù)設(shè)置變量的數(shù)據(jù),視圖中才可以更新

在地圖中選擇位置

如果用戶覺得定位不準(zhǔn),可以點(diǎn)擊 位置信息,打開地圖頁面,代碼如下


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

wx.navigateTo 函數(shù)用于跳轉(zhuǎn)到其他頁面,可以在url 值后面以 ?參數(shù)名=參數(shù)值 的方式傳遞參數(shù)

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 用于設(shè)置地圖的中心點(diǎn)

下面是 position.js 完整代碼


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

wx.chooseLocation 方法,會(huì)打開地圖,并且默認(rèn)以用戶當(dāng)前位置為中心點(diǎn)。并且會(huì)在下面展示周圍一些地點(diǎn)列表,供用戶選擇,用戶選擇完地點(diǎn)后,點(diǎn)擊 完成,會(huì)觸發(fā) 其 success 參數(shù)指定的函數(shù),可以通過參數(shù) res獲取地點(diǎn)名稱、經(jīng)緯度等相關(guān)信息

在這里,獲取當(dāng)相關(guān)信息后跳轉(zhuǎn)到主頁,同時(shí)將用戶選擇的位置名稱傳遞過去

在 index.wxml 中,有一段代碼用來處理:如果用戶在點(diǎn)擊 完成 前沒有選擇任何位置,則繼續(xù)顯示當(dāng)前位置,否則顯示用戶選擇的位置。


/*判斷是第一次加載還是從position頁面返回
    如果從position頁面返回,會(huì)傳遞用戶選擇的地點(diǎn)*/
    if (options.address != null && options.address != '') {
      //設(shè)置變量 address 的值
      this.setData({
        address: options.address
      });
    } else {....}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24433.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢