谷歌地图风格滚动任何人？

Posted 2023-05-08

【中文标题】谷歌地图风格滚动任何人？

【英文标题】：Google Maps style scrolling anyone?

【发布时间】：2010-09-09 03:51:58

【问题描述】：

我正在寻找一些能够滚动图像的 javascript 插件（最好是 jQuery），就像 Google Maps 的工作方式一样。

我可以使图像可拖动，但即使父 div 是 overflow:hidden，我也会在拖动时看到整个图像。

任何帮助将不胜感激！

【参考方案1】：

（我在这个现已死去的派对上迟到了，但是，嘿，我通过搜索找到了这个页面......）

mooware 建议的 Scrollview 插件对我不起作用。

但是 Dragscrollable 做到了： http://plugins.jquery.com/project/Dragscrollable

Try out the demonstration

【参考方案2】：

我参加聚会可能有点晚了，但我只是在寻找同样的东西。我偶然发现的是 jquery 的 scrollview，它运行完美，并且完全可以像谷歌地图一样拖动到滚动溢出的 div。

【讨论】：

谢谢，这正是我所需要的，已记下以备日后

【参考方案3】：

查看Google Maps Image Cutter 它可以拍摄任何图像或数码照片并将其切割成显示在谷歌地图上的图块。可能是完成您需要的快速方法...

【参考方案4】：

您可以使用 google maps api...它们允许您将其与自定义图像一起使用。您可以选择是否显示控件。

编辑：找到了一个关于如何做到这一点的不错的教程。 http://mapki.com/wiki/Add_Your_Own_Custom_Map

【讨论】：

虽然这是公认的答案，但我希望得到一个 jQuery 答案，而不是另一个完全不同的脚本。

我知道这个答案是 3 年前提出的。但是，我需要提到的是，Google 正在为 Google Maps API 提供付费模式；因此，如果您使用自己的图片，最糟糕的选择是 Google 地图。

【参考方案5】：

有关底层技术的详细描述，请查看实用程序员书籍Pragmatic Ajax 的第 4 章（如果我没记错的话）。

您将了解图像切片和切块是如何在幕后工作的。以及缩放。

【讨论】：

幕后黑手！我一直以为是显示器里的精灵在你拖动时移动了图像......

【参考方案6】：

这与 javascript 关系不大，而与 CSS coding 关系更大。

尝试仅使用 html 和 CSS 进行一些实验以正确剪辑图像，然后添加 javascript 以移动它。

如果你不能让它用 HTML 剪辑，或者用 javascript 移动，在这里发布最简单的问题演示供我们调试。

没有代码，我们在黑暗中拍摄。

【讨论】：

html 和 css 似乎确实是问题，当不拖动时，图像被剪切在父 div 中，但可拖动插件（jquery.interface）然后使整个图像再次可见

【参考方案7】：

Google 地图使用分割成块的图像，这些图像会随着用户向不同方向平移而动态加载。 Google Maps Image Cutter Paul Dixon 提到的是您想要的工具。

如果您只想平移一张大图像，而不是将图像分割成块的额外复杂性，那么您应该使用clip 属性而不是使用 CSS 溢出属性。所有值得考虑的浏览器都支持这一点，如果我没记错的话，可以到 IE4。

需要注意的一点：CSS2.1 规范显示了用逗号分隔的 rect 值的示例。但是，IE6 不支持此功能（也许 IE7 也不支持）。但是，所有其他浏览器都可以理解不带逗号的版本。所以不是

clip: rect(5px, 40px, 45px, 5px);

你应该使用

clip: rect(5px 40px 45px 5px);

为了兼容性。

您需要在 元素周围将容器

设置为 position:relative，然后将其设置为 position: absolute。

因此，基本技术是在用户拖动时更新 top 和 left 值，将它们与定义的视图宽度和高度一起使用到图像上来创建适当的 rect() 字符串，并更新 top、left ，以及 元素的样式属性的剪辑属性。

不要做我所做的，在 rect() 字符串中的值后面省略“px”。我花了很长时间才意识到为什么它不起作用:-)