谷歌地图算法(Ajax,瓷砖等)

问题描述:

我正在研究一个应用程序,它可以像Google地图一样显示大图像。当用户拖动地图时,会加载更多图像,以便当地图的新部分可见时,相应的图像已经就位。谷歌地图算法(Ajax,瓷砖等)

顺便说一下,这是一个Javascript项目。

我正在考虑将每个图块表示为一个正方形的div,并将图像作为背景图像加载。

我的问题:我该如何计算divs显示的内容,以及何时移动了贴图,如何知道何时可以看到新的div行?

谢谢!

关于计算divs显示的内容:学习交叉两个矩形的算法(*问题Algorithm to detect intersection of two rectangles?是一个很好的起点)。因此,显示的div是与“查看窗口”的交集非空的那些

关于告诉当新的div行已经变得可见时:无论如何你可能需要一个updateInterface()方法。使用此方法跟踪显示的div,以及在进入视图窗口之前未显示的div时,触发一个事件处理程序。

关于实现:您应该可能有视图窗口本身是一个溢出的div:hidden和position:relative。在CSS中拥有相对位置属性意味着绝对位置最高的0,左边0的子将位于容器的左上角(在您的情况下为视图区域)。

关于效率:取决于您“确定哪些div显示”算法结束的速度有多快,您只能在用户停止拖动而不是鼠标移动时尝试处理交集检测。您还应该在当前视图窗口周围预先加载区域,以便在用户没有拖得太远的情况下,它们将会被加载。

一些进一步的参考:

+0

感谢您的回复。迄今为止非常有用的东西。澄清一下,这个个人项目只是我认为只是为了好玩而已。 我一直在研究GWT,现在我想编程一个应用程序更多的参与,只是为了让我能够掌握它并获得GWT中的Hello world世界的东西。 我真正想要映射的是来自视频游戏的关卡。像这样的http://goo.gl/t3eQF,但是按需加载磁贴,而不是一次加载整个地图(即使在这个特殊的例子中,从精灵表中一次加载所有东西,可能更容易解)。 –

+0

嗨@EqSum,欢迎来到堆栈溢出!我很高兴你找到答案有用= D。大家知道,通过点击答案旁边的大数字上方的箭头,您可以找到有用的答案,并“接受”解决问题的答案(如果适用) 。这是人们贡献出好答案的动机=)。 –

+0

关于您的问题,请务必在我的回答中查看第二个链接的演示! –

没有理由以自己实现,真的,除非它只是一个有趣的项目。有几个处理在线映射的开源库。

要回答你的问题,你需要有一个正射影像类型的图像(图像与坐标空间对齐),然后从像素坐标(即屏幕)到世界坐标的映射。如果它不是地图图像,那么只是任意大的图像,然后,您需要在各种缩放级别的源图像的像素坐标与视口的坐标之间创建映射。

如果您阅读Google Map的SDK文档,您将看到对这些术语的解释。探索上述现有库之一,阅读其文档并了解它是如何完成的也是一个好主意。

但是,如果这是真正的工作,请不要自行实施。没有理由。

+0

我认为从他的问题我们不能真正推断出他的问题是地理问题,所以如果没有一些调整,映射库可能不会非常有用。但我同意应该使用现有解决方案(不包括学习目的)。 –