如何实现与 Seatgeek 一样的可缩放可拖动界面？
Seatgeek 有一个可缩放、可拖动的平铺界面。
一个例子在这里： http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
我想实现一个像这样的可滚动可拖动界面，但我无法使用谷歌地图的谷歌代码。 我还需要像谷歌地图这样的图块系统，它从服务器中提取图块来渲染地图。 需要用javascript来实现。我可以使用什么库？我该怎么做呢？ Seatgeek是如何做到的？
我反编译了他们的javascript http://pastebin.com/PVjahhnH
Seatgeek has a zoomable draggable tiled interface.
An example is here:
http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
I want to implement a scrollable draggable interface like this but I cannot use Google's code for google maps.
Also I need the tile system like google maps where it pulls tiles from the server for rendering the map.
Need to implement in javascript. What library can I use? How can I do it?
How does seatgeek do it?
I de-compiled their javascript http://pastebin.com/PVjahhnH
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这种接口实现起来看似复杂，但其实只是一些数学技巧。如果您决定实现自己的算法，请尝试以下操作：
如果用户拖动，所有图块都会同等移动。如果用户放大，所有图块都会放大。
您只需要加载并移动瓷砖即可。将平铺 x、y、宽度、高度乘以缩放。将场景焦点保持在鼠标位置。看一下这个示例。它完全执行上述步骤，但带有大量显微镜图像。这与谷歌地图的想法相同。
This kind of interface seems complex to implement, but it is just some math tricks. If you decide to implement your own algorithm, try this out:
If the user drags, all tiles moves equaly. If the user zoom in, all tiles are scaled up.
You just need to load and move the tiles. Multiply tile x, y, width, height by the zoom. Keep the focus of the scene in the mouse position. Take a look at this example. It does exactly the steps above, but with a lot of microscope images. It is the same idea of google maps.
CloudMade 地图瓦片是基于服务器的地图瓦片服务之一。请阅读此页面服务器 http://cloudmade.com/documentation/map-tiles 或联系[电子邮件受保护]了解更多信息。
CloudMade map tile is one of the server based map tile service. Please read this page server http://cloudmade.com/documentation/map-tiles or contact with [email protected] for more information.