功能需求
如滴滴打车,当用户叫到车之后,会在用户的界面同时显示用户当前位置和车辆位置,这两个点对程序来说都是随机的,怎么让两个点都显示在地图可视区域呢?
解决方法
小程序中不需要我们计算缩放级数,有一个 includePoints 方法可以实现。
关键代码
// 第一步
// 在页面初次渲染时 使用 wx.createMapContext 获取map上下文
onReady: function () {
this.mapCtx = wx.createMapContext('map'); // map为地图的id
}
// 第二步
// 定义一个 includePointsFn 方法, 参数为需要显示的坐标点(可多个)
includePointsFn: function (Point1, Point2) {
// 缩放视野展示所有经纬度(小程序API提供)
this.mapCtx.includePoints({
padding: [80, 50, 80, 50],
points: [Point1, Point2]
})
},
具体可参看官方接口:https://developers.weixin.qq.com/miniprogram/dev/api/api-map.html#wxcreatemapcontextmapid
结果输出
测试没有问题。