如何让 Google 地图在刷新时保持缩放和中心位置？

Question

我有这个：

function initMap() {
  // Create a new map object focused on PA
  map = new google.maps.Map(document.getElementById('Map'), { 
    zoom: 8, 
    center: { lat: 41, lng: -78 },
   });

我希望用户能够放大并切换地图上的数据以显示其他变量，而无需地图重置中心和缩放级别。

Answer 1

您有几个选择可供选择。两者都需要使用地图 API 中提供的各种事件来获取您想要存储的任何状态。

每次对其中任何一个进行更改时，您都可以创建一个具有缩放和居中功能的对象，并将其字符串化为 JSON 并存储在浏览器 localStorage 中。当页面加载时，您将获取存储的内容（如果有）并将其解析回可以传递给地图初始化的对象

另一种方法是在发生更改时使用

window.history.pushState()

和

URLSearchParams()

修改 url 中的查询字符串。然后，当页面加载时，获取 url 中的任何参数以传递给初始化