如何从给定的坐标中获取中心坐标？

Question

我正在使用 vue2 谷歌地图包，我有这样的数组对象：

markers:[
 { lat: 14.692734621176195, lng: 120.9642877585083 },
 { lat: 14.691963317641529, lng: 120.9715473253784 },
 { lat: 14.702160611177580, lng: 120.9621292582138 }
]

此外，对象标记是动态的，因此它可以包含多于/少于 3 个对象。

问题：谷歌地图在渲染时未居中对齐，因为我不知道如何找到中心坐标。有什么解决办法或建议如何将谷歌地图居中对齐吗？

Answer 1

如果您想要做的是适应屏幕上当前的标记选择，您可能正在寻找fitBounds方法。另请参阅这两个答案：

• 居中/设置地图缩放以覆盖所有可见标记？
• 计算多个纬度/经度坐标对的中心点

谢谢你，@MrUpsidown。

如果您有兴趣在不更改缩放级别的情况下找到标记选择的“中间”，这是我的原始答案：

“找到中心”可能是一个复杂的几何问题，但在您的情况下，您似乎想要找到包含所有点的最小 NS/EW 矩形的对角线交点。

这意味着您应该获取和数组的min和，并找到每个数组的这些限制的中位数。maxlatlng

// this fails when polygon crosses 180th meridian!
function findCenter(markers) {
  const lats = markers.map(m => m.lat);
  const lngs = markers.map(m => m.lng);
  return {
    lat: (Math.min(...lats) + Math.max(...lats)) / 2,
    lng: (Math.min(...lngs) + Math.max(...lngs)) / 2
  };
}

然而，正如 @MrUpsidown 所指出的，上面的代码对于穿过 180 度子午线的多边形会产生错误的结果。包含该情况的正确代码是：

function getMiddle(prop, markers) {
  let values = markers.map(m => m[prop]);
  let min = Math.min(...values);
  let max = Math.max(...values);
  if (prop === 'lng' && (max - min > 180)) {
    values = values.map(val => val < max - 180 ? val + 360 : val);
    min = Math.min(...values);
    max = Math.max(...values);
  }
  let result = (min + max) / 2;
  if (prop === 'lng' && result > 180) {
    result -= 360
  }
  return result;
}

function findCenter(markers) {
  return {
    lat: getMiddle('lat', markers),
    lng: getMiddle('lng', markers)
  }
}


// tests: 
console.log(findCenter([
  { lat: 14.692734621176195, lng: 120.9642877585083 },
  { lat: 14.691963317641529, lng: 120.9715473253784 },
  { lat: 14.702160611177580, lng: 120.9621292582138 },
])); 
// => { "lat": 14.697061964409555,  "lng": 120.96683829179611 }

console.log(findCenter([
  { lat: 50, lng: 45 },
  { lat: 0, lng: 125 },
  { lat: -50, lng: -100 }
]))
// => { "lat": 0,  "lng": 152.5 }

我的答案（绿色）和tugrul 的答案（蓝色）之间的差异如下图所示：https://q2k0r.csb.app/

正如 @mrupsidown 所指出的，Google 地图 API 提供了计算点集合中心的实用程序：

• 创建一个LatLngBounds对象并从标记集合中扩展它
• 用于.getCenter()创建的边界对象。