google-maps - 谷歌地图 map block 内的交互

Question

我在stackoverflow上问过这个问题，但是我没有得到我想要的最终答案。

所以我想再发一次，并提供更多细节。

原帖可以found here

当鼠标移到 map 瓦片(img)中的某个要素上时，光标将变为“指针”，您可以单击正确的位置，然后您将获得信息窗口。这就是我所说的“互动”。

在我看来，当我们拖动或缩放 map 时，google 会向服务器发出请求以获取当前 map View 内的要素。然后当鼠标移动到某个特征的Bound内时，效果就会出现。

但我奇怪的是，怎么会这么精确呢？

以此图 block 为例:

地物“Ridley....”的区域不是一个规则的矩形，如果你的鼠标不在这个地物的区域，光标不会改变。

但是一旦你的鼠标来到正确的地方(在这个功能的区域内)，效果就会出来，检查这个:

由于鼠标的位置正好在地物的区域内，所以我可以点击它并得到信息窗口。

我只想知道如何实现这个？

更新:

只有当鼠标悬停在特定区域时才会出现效果，检查一下:

效果出来只有鼠标在高亮的矩形区域内移动，非常精确。

Answer 1

这使用 javascript，要显示的实际内容已经从可用服务器填充到具有 display none 样式属性的 div 元素中。每个缩放级别为 16 的 256 x 256 图像都包含有关 x 和 y 以及服务器的信息。当查看谷歌地图时，使用 firebug 查看代码发生了什么变化，您会注意到图像列表底部有许多类为“css-3d-bug-fix-hack”的 div 元素。这些元素之一也会有 child 。第一个 child 被隐藏了。只需从那个 child 身上移除 display none ，它就会出现。

要实现此类功能，您需要知道如何使用 javascript 获取光标位置，如何使用 javascript 确定光标是否在 div 元素中，或者您可以使用 JQuery 选择器来测试特定类型的当前悬停元素。您还需要了解 CSS 中的绝对定位。然后使用javascript在cusrsor位置隐藏和显示元素。