【VUE】web高德地图海量点标记,全部居中显示在屏幕中

Map类的setBounds方法可以重新调整视角，让所有点标记全部居中显示在屏幕中。亲测有效，整理了一下笔记如下：
https://lbs.amap.com/api/javascript-api/reference/map

// <script> 中引入高德地图，并定义全局map
import AMap from 'AMap'
var map

// 1、获取到后台返回的坐标数据后，处理数据，并生成坐标点到地图上；
// 2、让所有点全部居中显示在屏幕中，点坐标数组对应以下方法格式
var arr = [
	{
    
     longitude: 113.753156, latitude: 38.781951 },
    {
    
     longitude: 116.2086, latitude: 39.729813 },
    {
    
     longitude: 115.2086, latitude: 39.029813 }
]

const sw = getSW(arr) // 循环所有的点标记，返回最西南的一个经纬度
const ne = getNE(arr) // 循环所有的点标记，返回最东北的一个经纬度
var mybounds = new AMap.Bounds(sw, ne) // sw, ne > [xxx,xxx], [xxx,xxx]
map.setBounds(mybounds)

以下是自定义的函数，返回最西南、最东北坐标。具体结构可根据自身拿到的数据结构进行更改！

/**
 * 坐标集合的最西南角
 * @param {*} list
 *  list 是接口获取的点 的数组
 */
export const getSW = (list) => {
    
    
  let south = null
  let west = null
  for (let item of list) {
    
    
    if ((west && item.longitude < west) || !west) {
    
    
      west = item.longitude - 0.7
    }
    if ((south && item.latitude < south) || !south) {
    
    
      south = item.latitude - 0.7
    }
  }
  return [west, south]
}

/**
 *  最东北角
 * @param {*} list
 */
export const getNE = (list) => {
    
    
  let north = null
  let east = null
  for (let item of list) {
    
    
    if ((east && item.longitude > east) || !east) {
    
    
      east = item.longitude + 0.7
    }
    if ((north && item.latitude > north) || !north) {
    
    
      north = item.latitude + 0.7
    }
  }

  return [east, north]
}

官方示例中的setFitView()对AMap.Marker也可以生效，但对海量点标记 AMap.MassMarks 无效。