Google Maps JS API如何让折线始终水平显示并居中缩放？

云上老周

2026-9-25

实现方案

1. 前置准备

首先需要满足两个基础配置，才支持地图旋转功能：

引入Google Maps JavaScript API时，URL参数添加libraries=geometry，用于方位角计算
启用矢量地图模式：在Google Cloud控制台创建地图ID时选择矢量模式，初始化地图时传入对应mapId

const map = new google.maps.Map(document.getElementById("map"), {
  mapId: "你的矢量地图ID",
  zoom: 18,
  tilt: 0, // 关闭3D倾斜，保持平面展示
});

2. 计算折线朝向，调整地图角度使其水平展示

通过折线首尾坐标计算当前朝向的方位角，再调整地图heading参数，让折线对齐屏幕水平方向：

// temp为你的坐标点数组
const startPoint = temp[0];
const endPoint = temp[temp.length - 1];

// 计算两点方位角：以正北为0度，顺时针递增
function calculateBearing(start, end) {
  const lat1 = google.maps.geometry.spherical.toRadians(start.lat());
  const lat2 = google.maps.geometry.spherical.toRadians(end.lat());
  const lngDiff = google.maps.geometry.spherical.toRadians(end.lng() - start.lng());
  const y = Math.sin(lngDiff) * Math.cos(lat2);
  const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lngDiff);
  const bearing = (google.maps.geometry.spherical.toDegrees(Math.atan2(y, x)) + 360) % 360;
  return bearing;
}

const lineBearing = calculateBearing(startPoint, endPoint);
// 调整地图heading，使折线与水平方向对齐
map.setHeading(90 - lineBearing);

3. 适配视口避免标记重叠

调整完地图角度后，重新计算边界并适配视口，设置padding保证所有标记完整展示不被裁切：

const bounds = new google.maps.LatLngBounds();
temp.forEach(point => bounds.extend(point));
// 第二个参数为视口内边距，可根据标记尺寸调整
map.fitBounds(bounds, {
  top: 60,
  bottom: 60,
  left: 60,
  right: 60
});