javascript - 类似图像滚动的谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4807449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript - google map like image scrolling
提问by John
I want to build an image scroller that works like google map. When the website first loads, there will be a viewing box in the middle of the page that contains part of an image. A user can click and drag the image, that is scrolling, to inspect other areas of the image. If the user happens to scroll beyond the perimeter of the image, the box will load an adjacent image. I also want to overlay these images with markers that the user can click on to zoom in for more details.
我想构建一个像谷歌地图一样工作的图像滚动条。当网站首次加载时，页面中间会出现一个包含部分图像的查看框。用户可以单击并拖动正在滚动的图像以检查图像的其他区域。如果用户碰巧滚动超出图像的边界，框将加载相邻的图像。我还想用标记覆盖这些图像，用户可以单击这些标记来放大以获取更多详细信息。
Is there a library that does what I want already? Or something close to what I want so that I can start to customize it? Or if I have to build from scratch, any suggestions on the general approach to take?
有没有一个图书馆可以做我想要的？或者接近我想要的东西以便我可以开始定制它？或者如果我必须从头开始构建，对一般方法有什么建议？
I like using jquery library, so anything built with jquery would be awesome.
我喜欢使用 jquery 库，所以任何用 jquery 构建的东西都会很棒。
采纳答案by Brandon
Take a look at the OverscrolljQuery plugin.
看看OverscrolljQuery 插件。
回答by Joe
回答by Peter ?rneholm
I've used OpenLayersfor projects similar to this and it works great! Not based on jQuery though.
我已经将OpenLayers用于与此类似的项目，并且效果很好！虽然不是基于 jQuery。
It provides free maps but you can have your own images as well.
它提供免费地图，但您也可以拥有自己的图像。
回答by Tom Gullen
Just for some design ideas to take into account when writing/finding your solution:
只是为了在编写/找到解决方案时要考虑的一些设计理念：
There are two ways of doing this, one with multiple chopped up images that preload when the user scrolls near them, and the other which is simpler and loads one big image.
有两种方法可以做到这一点，一种是当用户在它们附近滚动时预加载多个切碎的图像，另一种更简单并加载一个大图像。
If your image(s) are very big, you should opt for a solution that preloads segments as this will be a lot more user friendly if you can do it seamlessly.
如果您的图像非常大，您应该选择一种预加载片段的解决方案，因为如果您可以无缝地做到这一点，这将更加用户友好。
The big image will slow down some computers/mobile devices significantly!
大图像会显着降低某些计算机/移动设备的速度！
回答by Alan L.
If you built something yourself, it probably couldn't be pure jQuery. You'd want to write a server script that either processes your big images into segments that you cache, or serves segments on the fly. That's the point at which you could start using jQuery to control what gets loaded ans when.
如果你自己构建了一些东西，它可能不会是纯 jQuery。您可能想要编写一个服务器脚本，将大图像处理成缓存的片段，或者动态提供片段。这就是您可以开始使用 jQuery 来控制加载和加载时间的点。
