百度地图根据多个定位点自适应缩放级别（获取多个点位的中心点）

一、业务场景

地图上传入多个经纬度点位，根据经纬度的点位，显示合理的地图缩放级别和地图中心点，确保这些点位都能刚好在地图上展示出来。

二、实现方法

根据百度地图的 getViewport() 方法，获取到多个经纬度点位的中心点和合理的缩放级别。

	  // 获取合理的中心点
      const centerPoint = map.getViewport(mapPointsList)

      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(centerPoint.center, centerPoint.zoom)

部分代码如上所示：通过给 getViewport() 传入多个经纬度点位，返回合理的中心点经纬度点位和缩放级别。返回对象的 center 是点位，zoom 是缩放级别。

三、具体代码

<template>
  <div id="mapContainer" class="map-container"></div>
</template>

<script>
import {
    
     onMounted } from 'vue'
import BMap from 'BMap'

export default {
    
    
  name: 'BaiduMap',
  setup () {
    
    
    let map = null
    const pointsList = [{
    
    
      longitude: '116.226045',
      latitude: '39.663223'
    }, {
    
    
      longitude: '116.629636',
      latitude: '39.789306'
    }, {
    
    
      longitude: '116.892947',
      latitude: '38.36702'
    }, {
    
    
      longitude: '108.853328',
      latitude: '35.562558'
    }, {
    
    
      longitude: '112.620175',
      latitude: '32.288965'
    }, {
    
    
      longitude: '116.708974',
      latitude: '28.144061'
    }]
    const initMap = () => {
    
    
      // 创建地图实例
      map = new BMap.Map('mapContainer')

      // 根据传入的pointsList点位转化为百度Point
      const mapPointsList = []
      pointsList.forEach(item => {
    
    
        mapPointsList.push(new BMap.Point(Number(item.longitude), Number(item.latitude)))
      })

      // 获取合理的中心点
      const centerPoint = map.getViewport(mapPointsList)

      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(centerPoint.center, centerPoint.zoom)

      // 添加覆盖点
      mapPointsList.forEach(item => {
    
    
        // 添加覆盖点
        const mapIcon = new BMap.Icon(require('./assets/map-position.png'), new BMap.Size(40, 52))
        const marker = new BMap.Marker(item, {
    
     icon: mapIcon })
        // 给地图添加覆盖物marker
        map.addOverlay(marker)
      })
    }

    onMounted(() => {
    
    
      initMap()
    })

    return {
    
    

    }
  }
}
</script>

<style lang="scss" scoped>
// 地图
.map-container {
    
    
  width: 100%;
  height: 600px;
}
</style>

四、效果展示

在页面初次加载的时候会自动计算出合理的中心点位和缩放级别，不会单独以某个点位和固定的缩放级别进行渲染而导致某些点位在加载时看不到。