javascript - google-map-react 使用多个标记使 map 居中

标签 javascript reactjs google-maps google-map-react

当我有两个以上的标记时,如何找到 map 的中心?当我只有 2 个时,我会这样做:

midPoint(trackingLocation, deliveryLocation) {
    if (deliveryLocation) {
      return [
        trackingLocation.lat + (deliveryLocation.lat - trackingLocation.lat) * 0.5,
        trackingLocation.lng + (deliveryLocation.lng - trackingLocation.lng) * 0.5
      ];
    } else {
      return trackingLocation;
    }
  }

但是当我有 5 个标记时,如何计算中心?

谢谢

最佳答案

找到包含所有标记的矩形,然后使用该矩形的中点。

首先,遍历所有标记并找到:

  • 最小纬度
  • 最小值
  • 最大纬度
  • 最大流量

然后您可以使用这两点对两个标记进行相同的计算:

  • (最小纬度,最小经度)
  • (最大纬度,最大经度)

关于javascript - google-map-react 使用多个标记使 map 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56446896/

相关文章:

Javascript onclick 对象不是函数

reactjs - React/NextJs - 如何将 Prop 传递给组件的数组/对象

google-maps - 两条道路交叉点的地理编码

javascript - 删除谷歌地图API中公交路线的车辆信息

javascript - 将两个唯一对象推送到一个空数组会导致一个包含 2 个等效对象的数组

javascript - 在 Chrome 中使用 JavaScript POST 将自定义 cookie 发送到另一个域

javascript - 在 ReactJS 中添加 URLSearchParams 条件

javascript - Google Map API V3 检测容器宽度/高度变化

javascript - 如何在 Angular 8 中添加冰沙图表

javascript - 用数组中的多个父组件包装组件