浏览器后退按钮跳转到最后一个位置（如 maps.google.com）

Posted 2023-02-23

【中文标题】浏览器后退按钮跳转到最后一个位置（如 maps.google.com）

【英文标题】：Browser Back-Button jump to last location (like maps.google.com)

【发布时间】：2012-03-23 15:24:36

【问题描述】：

我要做的是转到 Google 地图中的某个位置（通过搜索或仅通过拖动地图）。现在我在地址栏中输入另一个 URL，然后按回车键转到该站点。

当我使用浏览器返回按钮时，谷歌地图会自动切换回我上次所在的位置。

如果我拖动地图并且没有在 Google 地图网站上使用某种“POST”，该怎么办？我想在我自己的 google 谷歌地图应用中也有同样的行为。

我正在使用 Google Maps API for javascript v3

【参考方案1】：

我不知道 GMaps 是否为此提供了方便的方法，但通常此类功能基于 html5 history.pushState()，可让您将自定义步骤添加到导航历史记录并观察用户何时返回：

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

如果您想以这种方式处理更高级的应用程序状态，可以在其上构建几个框架，例如Backbone router, LeviRoutes.

在 HTML4 浏览器中，pushState 可以是 emulated with fragment identifiers（哈希 URL）。

【讨论】：

感谢这种通用方法 - 我可能会采用 Turek 指出的解决方案（以及最后一句中的您），但很高兴了解 pushState()。

【参考方案2】：

首先，您只需在地图上查找名为“dragend”的事件

google.maps.event.addListener(map, 'dragend', function() 

);

然后您需要使用 getCenter() 获取您的坐标并将您的浏览器重定向到“#coordinates”，它不会在您使用哈希时重新加载您的窗口，但它会将其保存在历史记录中。

coords = map.getCenter();
window.location = '#' + encodeURI(coords);

现在您需要添加侦听器来检查 URL 中的任何“哈希”更改（假设您有 jQuery）

$(window).bind('hashchange', function () 
    var hash = window.location.hash.slice(1);
);

最后你需要告诉你的地图改变坐标和解码 url

hash = decodeURL(hash);
map.panTo(hash);

您可以使用 setCenter() 代替 panTo()，但它会在单击后退按钮时添加一些漂亮的动画。

更改此代码以用于您搜索的位置非常容易，您可以使用事件“center_changed”而不是“dragend”，它会处理所有事情。

我写的所有内容都在这里：

https://developers.google.com/maps/documentation/javascript/reference#Map

希望对你有所帮助。

【讨论】：

谢谢 - 这听起来是一个合理的方法，我会在解决后立即提供反馈。

我开始认为这对我来说是一种非常不干净的方式。然后事情是，我必须存储的不仅仅是坐标，我不希望 URL 中的所有内容都可见，它也不必是可收藏的。有趣的是，谷歌地图也不使用标签。而且我认为它甚至不使用浏览器的历史记录。我不知道他们是怎么做到的......

您实际上不需要将坐标存储在哈希中，例如，您可以保存城市...在这种方法中，无论如何您都可以在网站上的某处生成标记数组，因此您可以参考您的散列到该信息...

$(window).bind...() 行是否也在dragend 事件中？