我在stackoverflow中问过这个问题，但是我没有得到我想要的最终答案。
所以我想再次发布它，并提供更多详细信息。
原帖可以found here
当鼠标移动到地图瓦片（img）中的某个要素上时，光标将变为“指针”，您可以单击正确的位置，然后您将获得信息窗口。这就是我所说的“交互式”。
在我看来，当我们拖动或缩放地图时，google 会向服务器发出请求以获取当前地图视图中的要素。那么当鼠标在某个特征的Bound内移动时，效果就会出现。
但我想知道的是，它怎么会如此精确？
以这个瓷砖为例：
特征“Ridley....”的区域不是一个规则的矩形，如果你的鼠标不在这个特征的区域内，光标不会改变。
但是一旦你的鼠标来到正确的位置（在这个功能的区域内），效果就会出来，检查这个：
由于鼠标的位置正好在特征区域内，所以我可以点击它，得到信息窗口。
我只想知道如何实现这个？
更新：
只有当鼠标移到特定区域时才会出现效果，检查一下：
效果出来只有鼠标在高亮矩形区域内移动，非常精确。
【问题讨论】：
标签： google-maps
这使用了 javascript，并且要显示的实际内容已经从可用服务器中填充到具有 display none 样式属性的 div 元素中。每个缩放级别为 16 的 256 x 256 图像都包含有关 x 和 y 以及服务器的信息。查看谷歌地图时，使用萤火虫查看代码的变化，您会注意到图像列表底部有许多带有“css-3d-bug-fix-hack”类的 div 元素。这些元素之一也将有子元素。第一个孩子是隐藏的。只需从那个孩子身上移除 display none ，它就会出现。
要实现这样的功能，您需要知道如何使用 javascript 获取光标位置，如何使用 javascript 确定光标是否在 div 元素中，或者您可以使用 JQuery 选择器来测试特定类型的当前悬停元素。您还需要了解 CSS 中的绝对定位。然后使用javascript隐藏和显示光标位置的元素。
【讨论】：
他们是否有可能使用基于多边形的AREA 标签：http://www.w3.org/TR/html4/struct/objects.html#edef-AREA？
根据定义，这些标签不必是矩形。他们可以使用<area shape='poly' coords='...'> 之类的东西，坐标可以根据他们的需要精确。
更新：在回答之前我没有机会检查http://maps.google.com，但我现在可以看出他们没有使用图像映射，因此该功能不是基于@ 987654325@ 标签。但是，如果您需要非矩形图像地图叠加的功能，我最初的反应仍然有效。
【讨论】：
google.maps.Marker 对象可以监听以下用户事件，例如：
'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'
http://code.google.com/apis/maps/documentation/javascript/events.html
GoogleMap 使用 InfoWindows 将数据描述覆盖在 Marker 上。
InfoWindows 在地图上方的浮动窗口中显示内容。这 信息窗口看起来有点像漫画书的文字气球；它有一个 内容区域和锥形茎，其中茎的尖端位于 地图上指定的位置。您可以看到正在运行的信息窗口 通过点击谷歌地图上的商业标记。信息窗口 构造函数接受一个 InfoWindow 选项对象，该对象指定一个集合 用于显示信息窗口的初始参数。创建后， 信息窗口未添加到地图中。制作信息窗口 可见，需要调用 InfoWindow 上的 open() 方法，通过 它是要在其上打开的地图，还可以是用来打开的标记 锚定它。 （如果没有提供标记，信息窗口将在其 位置属性。）
http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
创建一个标记并使用鼠标悬停事件附加信息窗口
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, Test
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
已编辑查看您的评论后
Google 地图广泛使用 JavaScript。当用户拖动地图时，网格方块会从服务器下载并插入到页面中。当用户搜索商家时，结果会在后台下载并插入到侧面板和地图中；该页面未重新加载。通过在地图图像顶部放置一个红色图钉（由几个部分透明的 PNG 组成）动态绘制位置。
使用带有表单提交的隐藏 IFrame，因为它保留了浏览器历史记录。出于性能原因，该站点还使用 JSON 而非 XML 进行数据传输。这些技术都属于广泛的 Ajax 保护伞。 [来自维基百科]
【讨论】：