微信小程式地圖上選擇位置
實現效果
很多小程式都有如下需求:
小程式開啟後,以文字形式顯示使用者所在位置,如果使用者覺得不準,可以開啟地圖,在地圖上自己選擇位置,選擇完成後,顯示的使用者的位置會發生變化
點選地址選擇地點
選擇地點之後
原始碼實現
下面不僅僅是原始碼,還希望通過原始碼儘量講解小程式的相關知識
檢視 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
});