EA&UML日拱一卒-微信小程序实战：位置闹铃 (4)-从地图上选点
创建监控点的第一步就是选择监控点的位置，经过各种尝试，位置闹铃程序采用移动地图对准中心点的方式来决定监控点的位置。
具体就是通过调整地图的比例和位置，是目标位置对准地图中心点。为了方便使用，在地图中心位置设置了一个不随地图移动的红色小方框。
setpoint.wxml
<!--setpoint.wxml-->
<view class="container">
<map id = "alarmMap" class="map_area" longitude="{{longitude}}" latitude="{{latitude}}"controls="{{controls}}" bindregionchange="regionChanged"></map>
<text class ="location_text">{{location}}</text>
</view>
<view class="navigate_bar">
<button bindtap="editActionButtonTaped" class="navigate_btn_3" style="background-color:coral;">EditAction</button>
<button bindtap="cancelButtonTaped" class="navigate_btn_3" style="background-color:coral;">Cancel</button>
</view>
本文主要关注map控件的两个属性：controls和bindregionchange。
controls
controls属性的功能是在地图上显示控件，通过controls制定的控件不随着地图移动。因此可以使用controls在画面的特定位置显示一个小图标来显示监控点的目标位置。
本例中指定的数据为{{controls}}，其具体内容在setpoint.js中指定。
bindregionchange
bindregionchange用于指定在视野发生变化时触发的处理。所谓视野变化，包括地图的位置和比例的变化。
本例中指定的处理名为regionChanged，其具体实现也在setpoint.js中。
setpoint.js
//setpoint.js
//获取应用实例
const app = getApp()
Page({
data: {
longitude: 0,
latitude: 0,
location: ',',
controls: [{
id: 1,
iconPath: '/images/control.png',
position: {
left: (app.windowWidth - 16) / 2,
top: (app.windowHeight * 0.85 - 16) / 2,
width: 16,
height: 16
},
clickable: true
}]
},
//事件处理函数
onReady: function (e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext('alarmMap')
},
regionChanged: function (e) {
var that = this
this.mapCtx.getCenterLocation ({
success: function(res) {
console.log("setpoints.js regionChanged")
var latitude = res.latitude
var longitude = res.longitude
var location = latitude.toFixed(4) + ',' + longitude.toFixed(4)
that.setData({
location: location,
});
app.globalData.newAlarm = {
longitude: longitude,
latitude: latitude
};
}
})
},
editActionButtonTaped: function () {
console.log("setpoint.js::editActionButtonTaped")
wx.navigateTo({
url: '../editaction/editaction'
})
},
cancelButtonTaped: function () {
console.log("setpoint.js::cancelButtonTaped")
wx.navigateBack(1)
},
onLoad: function () {
var that = this
if (app.globalData.currentPoiont == null)
{
wx.getLocation({
type: 'gcj02', // 返回 可以 用于 wx. openLocation 的 经纬度
success: function (res) {
console.log("setpoints.js setAlramPosition")
var latitude = res.latitude
var longitude = res.longitude
var location = latitude.toFixed(4) + ',' + longitude.toFixed(4)
that.setData({
longitude: longitude,
latitude: latitude,
location: location,
});
app.globalData.newAlarm = {
longitude: longitude,
latitude: latitude
};
}
})
}
},
})
controls控件信息
本例中为控件指定的信息有图标文件路径，在屏幕上的显示位置，图标大小等信息。其中位置信息的计算参考了显示窗口的尺寸。这部分信息在小程序启动时，用下面的方法取得。
try {
var res = wx.getSystemInfoSync()
this.pixelRatio = res.pixelRatio
this.windowWidth = res.windowWidth
this.windowHeight = res.windowHeight
} catch (e) {
console.log("wx.getSystemInfoSync() error!")
}
取得当前地图中心位置
在本画面启动时，画面中心位置就是设备的所在位置，当手动移动地图时，地图中心位置的经纬度就会发生变化。以下代码在地图视野发生变化时取得显示中心位置的经纬度。
regionChanged: function (e) {
var that = this
this.mapCtx.getCenterLocation ({
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var location = latitude.toFixed(4) + ',' + longitude.toFixed(4)
that.setData({
location: location,
});
app.globalData.newAlarm = {
longitude: longitude,
latitude: latitude
};
}
})
},
它的核心就是调用mapCtx.getCenterLocation，然后将返回值赋值给适当的变量。
参考资料
地图表示
https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map
获取地图中心位置
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-map.html#wxcreatemapcontextmapid
写在文章的最后