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

我正在开发一个应用程序，它可以显示一个大的图像，就像谷歌地图一样。当用户拖动地图时，会加载更多的图像，以便当地图的新部分可见时，相应的图像已经就位

顺便说一下，这是一个Javascript项目

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

我的问题是：如何准确地计算显示的div，以及在移动平铺时，如何判断新的div行何时可见

---

谢谢

关于计算div显示的内容：学习两个矩形相交的算法（stackoverflow问题是一个很好的起点）。因此，显示的div是那些与“视图窗口”的交点为非空的div

关于何时显示新行div：无论如何，您可能需要updateInterface（）方法。使用此方法跟踪显示的div，当在进入视图窗口之前未显示的div进入视图窗口时，触发一个事件处理程序

关于实现：您可能应该让视图窗口本身是一个div，带有overflow:hidden和position:relative。在CSS中具有相对位置属性意味着绝对位置为top 0、left 0的子级将位于容器的左上边缘（在您的示例中为视图区域）

关于效率：根据“确定显示哪些div”算法的最终速度，您可以仅在用户停止拖动而不是鼠标移动时尝试处理交叉点检测。您还应该在当前视图窗口周围立即预加载这些区域，这样，如果用户没有拖得太远，它们就已经被加载了

进一步参考：

---

除非这只是一个有趣的项目，否则没有理由自己实施。有几个开源库可以处理在线映射
要回答您的问题，您需要有一个正射影像类型的图像（与坐标空间对齐的图像），然后是从像素坐标（即屏幕）到世界坐标的映射。如果不是贴图图像，而是任意大的图像，那么同样，您需要在不同缩放级别的源图像的像素坐标和视口坐标之间创建映射
如果您阅读谷歌地图的SDK文档，您将看到这些术语的解释。探索前面提到的一个现有库，阅读它的文档，看看它是如何实现的，这也是一个好主意

---

但是，再一次，如果这是真正的工作，不要自己实施。没有理由。
我认为，从他的问题中，我们无法真正推断他的问题是地理问题，因此，如果不进行一些调整，映射库可能不会非常有用。不过，我同意应该使用现有的解决方案（不包括学习目的）。谢谢您的回复。到目前为止，非常有用的东西。澄清一下，这个个人项目只是我想做的只是为了好玩。我一直在学习GWT，现在我想编写一个更具参与性的应用程序，这样我就可以掌握它的窍门并通过GWT中的hello world内容。我实际上想要绘制的是视频游戏中的关卡。类似于这样的情况，但是根据需要加载分幅，而不是一次加载整个地图（尽管在这个特定示例中，从精灵表一次加载所有内容可能是一个更简单的解决方案）。您好@EqSum，欢迎使用堆栈溢出！我很高兴你发现答案有用=D。正如你所知，如果你认为答案有用，那么“投票”（点击答案旁边大数字上方的箭头）和“接受”解决问题的答案（如果适用）被认为是一个很好的措施。这是鼓励人们提供好答案的一种激励。关于你的问题，请务必查看演示，以获得我答案中的第二个链接！