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

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

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

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

選擇地點(diǎn)之后

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

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

視圖 index.wxml

index.wxml:

{{address}}

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)地址:

onChangeAddress: function (e) {

wx.navigateTo({

url: "/pages/position/position"

});

}

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

position.wxml:

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 {....}

總結(jié)

以上是生活随笔為你收集整理的微信小程序自带地图_微信小程序地图上选择位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。