如何获取Google地图当前缩放百分比及解决页面返回后地图重置问题

1. 获取当前地图的缩放级别（你提到的“缩放百分比”对应Maps的缩放级别） #

Google Maps JavaScript API里并没有直接的“缩放百分比”概念，它用的是缩放级别（数值范围大致1-20，数值越大地图显示越精细）。要获取当前缩放级别，直接调用地图实例的getZoom()方法就行：

// 假设你的地图实例变量是map
const currentZoom = map.getZoom();
console.log("当前缩放级别：", currentZoom);

如果需要在用户滚动/缩放地图时实时获取更新，还可以监听zoom_changed事件：

map.addListener('zoom_changed', () => {
  const currentZoom = map.getZoom();
  console.log("缩放级别已更新：", currentZoom);
});

2. 解决返回页面后地图恢复初始状态的问题 #

这个问题的核心是保存地图的操作状态，在页面重新加载时自动恢复。我们可以用浏览器的localStorage（持久保存）或sessionStorage（关闭标签页即清除）来存储地图的中心坐标和缩放级别，具体步骤如下：

第一步：监听地图状态变化，保存到本地存储 #

当用户拖动地图或调整缩放后，把当前状态存起来：

// 监听地图拖动结束事件
map.addListener('dragend', saveMapState);
// 监听缩放变化事件
map.addListener('zoom_changed', saveMapState);

function saveMapState() {
  const center = map.getCenter();
  const zoom = map.getZoom();
  // 用localStorage持久保存，换成sessionStorage则仅临时保存
  localStorage.setItem('mapCenter', JSON.stringify({
    lat: center.lat(),
    lng: center.lng()
  }));
  localStorage.setItem('mapZoom', zoom);
}

第二步：页面加载时恢复地图状态 #

在初始化地图的代码里，先检查本地存储有没有保存的状态，有就用保存的状态初始化：

function initMap() {
  // 定义默认初始状态（比如你原来的初始坐标和缩放级别）
  const defaultCenter = { lat: 39.9042, lng: 116.4074 }; // 北京坐标示例
  const defaultZoom = 12;

  // 从本地存储读取保存的状态
  const savedCenter = localStorage.getItem('mapCenter');
  const savedZoom = localStorage.getItem('mapZoom');

  // 确定最终使用的中心和缩放级别
  const mapCenter = savedCenter ? JSON.parse(savedCenter) : defaultCenter;
  const mapZoom = savedZoom ? parseInt(savedZoom) : defaultZoom;

  // 初始化地图
  const map = new google.maps.Map(document.getElementById('map'), {
    center: mapCenter,
    zoom: mapZoom
  });

  // 绑定状态保存监听
  map.addListener('dragend', saveMapState);
  map.addListener('zoom_changed', saveMapState);

  return map;
}

这样当你返回地图页面时，就会自动恢复到之前操作的状态啦。另外你提到map.setZoom(12)是设置缩放级别，对应的获取方法就是上面的map.getZoom()，两者是配套使用的。

内容的提问来源于stack exchange，提问作者Varinder Singh Baidwan