微信小程式開發MAP（地圖）
在建立MAP（地圖）前，請各位小夥伴們認真的去了解微信小程式開發的說明。https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map
瞭解完MAP（地圖）裡的屬性之後，接下來我們就來建立一個簡單的MAP（地圖）控制元件。
第一步：肯定是建立專案、起專案名、專案地址
PS:我這裡以index的檔案為名
第二步：我們來寫 index.wxml 檔案的程式碼
WXML檔案程式碼：
<map id="map4select" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="20" style="width:{{map_width}}px;height:{{map_height}}px" bindregionchange="regionchange" controls="{{controls}}">
</map>
WXML檔案的程式碼寫好之後，就要來進行第三步了。
第三步：寫 index.js 檔案的程式碼
var app = getApp()
Page({
data: {
map_width: 380
, map_height: 380
}
//show current position
, onLoad: function (options) {
console.log(options.schedule_id);
var that = this;
// 獲取定位，並把位置標示出來
that.setData({
longitude: 113.324520
, latitude: 23.099994
, markers: [
{
id: 0
, iconPath: "../imgs/ic_position.png"
, longitude: 113.324520
, latitude: 23.099994
, width: 30
, height: 30
}
]
})
//set the width and height
// 動態設定map的寬和高
wx.getSystemInfo({
success: function (res) {
console.log(res.windowWidth);
that.setData({
map_width: res.windowWidth
, map_height: res.windowWidth
, controls: [{
id: 1,
iconPath: '../imgs/ic_location.png',
position: {
left: res.windowWidth / 2 - 8 ,
top: res.windowWidth / 2 - 16 ,
width: 30,
height: 30
},
clickable: true
}]
})
}
})
}
//獲取中間點的經緯度，並mark出來
, getLngLat: function () {
var that = this;
this.mapCtx = wx.createMapContext("map4select");
this.mapCtx.getCenterLocation({
success: function (res) {
that.setData({
longitude: 113.324520
, latitude: 23.099994
, markers: [
{
id: 0
, iconPath: "../imgs/ic_position.png"
, longitude: 113.324520
, latitude: 23.099994
, width: 30
, height: 30
}
]
})
}
})
}
, regionchange(e) {
// 地圖發生變化的時候，獲取中間點，也就是使用者選擇的位置
if (e.type == 'end') {
this.getLngLat()
}
}
, markertap(e) {
console.log(e)
}
})
index.js 和 index.wxml 兩個檔案的程式碼已經寫好，那麼我們就來頁面上看看效果。
PS：“../imgs/ic_position.png” 和 “../imgs/ic_location.png” 是我在專案裡建立的一個名叫imgs資料夾裡面的兩個定位小圖示，各位小夥伴們可以根據自己的需求改換小圖示，只需要把小圖示放進imgs資料夾裡面，小圖示的路徑引用正確就可以顯示出來。
效果如下：