谷歌地图算法（Ajax、Tiles等）

Question

3

我正在开发一款应用，该应用以与 Google Maps 几乎相同的方式显示大型图像。当用户拖动地图时，会加载更多图像，这样当地图的新部分可见时，相应的图像已经到位。

顺便说一下，这是一个 JavaScript 项目。

我考虑将每个瓦片表示为一个正方形 div，其中图像作为背景图像加载。

我的问题是：如何准确计算哪些 div 正在显示，当平铺移动时，如何判断新的一行 div 是否变得可见？

谢谢！

- rodrigo-silveira

2个回答

2

没有必要自己实现这个功能，除非你只是为了好玩而已。有几个开源库可以处理在线地图。

回答你的问题，你需要有一种正交照片类型的图片（与坐标空间对齐的图片），然后将像素坐标（即屏幕）映射到世界坐标。如果不是地图图片，而是任意大的图片，则需要在各个缩放级别上创建源图像的像素坐标与视口坐标之间的映射。

如果您阅读 Google 地图的 SDK 文档，您将看到这些术语的解释。另外，探索上述现有库之一，阅读其文档并查看如何完成也是一个好主意。

但是，如果这是真正的工作，请不要自己实现它。没有理由这样做。

- Assaf Lavie

我认为从他的问题中我们无法真正推断出他的问题是地理相关的，因此在没有进行一些调整的情况下，映射库可能不会非常有用。不过，我同意应该使用现有的解决方案（除了学习目的）。 - Rafael Almeida

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael Almeida · Accepted Answer

关于计算哪些div正在显示：学习相交两个矩形的算法（stackoverflow问题Algorithm to detect intersection of two rectangles?是一个很好的起点）。有了这个，与“视窗”相交非空的div是正在显示的div。

关于告诉何时出现新行的div：您可能需要一个updateInterface()方法。使用此方法跟踪正在显示的div，并在之前未显示的div进入视窗时触发事件处理程序。

关于实现：您应该将视窗本身作为具有overflow: hidden和position: relative的div。在CSS中具有相对位置属性意味着具有绝对位置top 0，left 0的子元素将位于容器（在您的情况下是视图区域）的左上角。

关于效率：根据您的“确定哪些div正在显示”的算法有多快，您可以尝试仅在用户停止拖动时处理相交检测，而不是在鼠标移动时处理。您还应该预加载当前视窗周围的区域，以便如果用户没有拖得太远，它们将已经加载。

一些进一步的参考资料：