微信小程序地圖組件中的include-points怎樣縮放視野並將所有坐標點在規定的視野內展示？

開發微信小程序過程中運用到了map地圖組件，官網文檔寫的比較簡陋一些，好多核心功能沒有詳細說明，比如include-points，怎樣做到類似滴滴那種將所有坐標點都展示在視野范圍內呢；

1.如果不設置中心點latitude、longitude會有不能展現到視野內的問題；所以先要計算兩點之間的中心點：

var lat = (that.data.from_latitude + that.data.to_latitude) / 2;

var lng = (that.data.from_longitude + that.data.to_longitude) / 2;

然后再把起始點和終點的坐標以數組的格式傳入include-points這個屬性，這樣就可以使起始點和終點之間的連線都展示在視野范圍內了；

需要注意的是include-points屬性可以通過計算所有點的最大矩形左下經緯度&右上經緯度來設置，這樣可以減小setData的數據。因為小程序setData的數據傳輸有1M的限制，就是說include-points屬性不可以傳入過多的坐標點，目前我是只傳入了起始點和終點的坐標，但是也有的把連線的坐標點都傳入了進去，看個人需求吧，只要能達到效果，過程不重要；

2.還有一個辦法是使用小程序的API：mapCtx.includePoints方法

var mapCtx = wx.createMapContext("map");
mapCtx.includePoints({
      padding: [ 70,],
      points: [{
        latitude: that.data.from_latitude,
        longitude: that.data.from_longitude
      }, {
        latitude: that.data.to_latitude,
        longitude: that.data.to_longitude
      }]
    })

 

不管是哪個方法都需要計算兩點之間的中心點，這樣才能確保所有的坐標點都在視野內；

by: qiuqiu