如何用TypeScript/JavaScript实现Google Maps等距圆形网格

在Google Maps中用经纬度直接加减相同步长生成网格时，会出现垂直（纬度方向）间距大于水平（经度方向）的问题——这是因为纬度每度的实际地面距离固定约111公里，但经度每度的距离会随纬度变化，等于111km × cos(当前纬度)。你的现有代码直接对lat和lng使用相同的spacing，导致实际间距不相等。

你的当前代码：

const center = { lat: 39.9511163, lng: -75.1651992 };
const gridSize = 7;
const spacing = 0.002;

const createGrid = (
  center: google.maps.LatLngLiteral,
  gridSize: number,
  spacing: number
) => {
  const grid = [];
  const start = Math.floor(gridSize / 2);
  for (let i = -start; i <= start; i++) {
    for (let j = -start; j <= start; j++) {
      grid.push({
        lat: center.lat + i * spacing,
        lng: center.lng + j * spacing,
      });
    }
  }
  return grid;
};

const circles = createGrid(center, gridSize, spacing);

修正方案 #

针对经度方向的步长做修正，基于中心点的纬度计算出经度方向的等效步长，保证实际地面距离和纬度方向一致。修改后的代码如下：

const center = { lat: 39.9511163, lng: -75.1651992 };
const gridSize = 7;
const spacing = 0.002; // 这个值对应纬度方向的步长（实际地面距离）

const createGrid = (
  center: google.maps.LatLngLiteral,
  gridSize: number,
  spacing: number
) => {
  const grid = [];
  const start = Math.floor(gridSize / 2);
  // 计算经度方向的等效步长，确保和纬度方向实际间距相等
  const lngSpacing = spacing / Math.cos(center.lat * Math.PI / 180);
  
  for (let i = -start; i <= start; i++) {
    for (let j = -start; j <= start; j++) {
      grid.push({
        lat: center.lat + i * spacing,
        lng: center.lng + j * lngSpacing,
      });
    }
  }
  return grid;
};

const circles = createGrid(center, gridSize, spacing);

关键说明 #

• Math.cos(center.lat * Math.PI / 180)：将纬度从角度转为弧度后计算余弦值，得到当前纬度下经度每度的距离比例
• lngSpacing = spacing / 余弦值：让经度方向的步长对应的实际地面距离，和纬度方向的spacing完全一致

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