如何从给定markers坐标集计算中心点，实现vue2谷歌地图居中对齐

方案1：使用谷歌地图原生LatLngBounds实现自动居中+自适应缩放（推荐） #

该方案无需手动计算坐标，谷歌地图API会自动计算可容纳所有标记点的最小边界，同时自动调整地图中心和缩放等级，保证所有标记都在可视区域内，可适配任意数量的动态markers。

Vue2代码示例（基于vue2-google-maps包）：

import { gmapApi } from 'vue2-google-maps'

export default {
  // 组件其他配置省略
  watch: {
    // 深度监听markers动态变化，每次更新都重新适配边界
    markers: {
      handler(newVal) {
        if (!newVal || newVal.length === 0) return
        this.$nextTick(async () => {
          const google = await gmapApi()
          // 需提前给GmapMap组件绑定ref属性：<GmapMap ref="mapRef" ...>
          const map = await this.$refs.mapRef.$mapPromise
          // 初始化边界实例
          const bounds = new google.maps.LatLngBounds()
          // 遍历所有标记点加入边界
          newVal.forEach(marker => {
            bounds.extend(new google.maps.LatLng(marker.lat, marker.lng))
          })
          // 地图适配边界，第二个参数为边距（单位：像素，避免marker贴在地图边缘）
          map.fitBounds(bounds, 20)

          // 若不需要自动缩放，只需要固定居中，可以替换fitBounds为以下代码
          // map.setCenter(bounds.getCenter())
        })
      },
      deep: true,
      immediate: true // 页面初始化时就执行一次适配
    }
  }
}

方案2：手动计算平均中心点 #

如果不需要自动缩放，仅需要简单获取中心点坐标，可直接计算所有点经纬度的平均值：

// 封装中心点计算方法
function getMarkerCenter(markers) {
  if (markers.length === 0) {
    // 空数组时返回你的默认坐标
    return { lat: 14.6927, lng: 120.9643 }
  }
  const total = markers.length
  const sumLat = markers.reduce((sum, item) => sum + item.lat, 0)
  const sumLng = markers.reduce((sum, item) => sum + item.lng, 0)
  return {
    lat: sumLat / total,
    lng: sumLng / total
  }
}

// 动态更新时重新计算并赋值给地图的center属性即可
this.mapCenter = getMarkerCenter(this.markers)

注意事项：

• 该方案仅适合标记点分布均匀的场景，若存在离群点，可能出现部分标记不在可视区域的问题，该场景优先使用方案1
• markers动态更新时需要同步重新计算中心点并赋值

内容的提问来源于stack exchange，提问作者Ghed Mendiola