小程序上让随机的两个点都显示在地图可视区域

功能需求

如滴滴打车，当用户叫到车之后，会在用户的界面同时显示用户当前位置和车辆位置，这两个点对程序来说都是随机的，怎么让两个点都显示在地图可视区域呢？

 

解决方法

小程序中不需要我们计算缩放级数，有一个 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

 

结果输出

测试没有问题。