谷歌地图的地图瓷砖内的互动

Question

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

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

原始帖子可以是found here

当地图上的某个要素上的mosue（img）时，光标将变为“指针”，并且您可以单击正确的位置，然后您将获得信息窗口。这就是我所说的“互动”。

在我看来，当我们拖动或缩放地图时，谷歌会向服务器发出请求以获取当前地图视图中的功能。然后当鼠标移动到一个特征的边界内时，效果将会发生。

但我想知道它怎么会这么精确呢？

以此图块为例：

“Ridley ....”功能区域不是常规矩形，如果鼠标不在此功能区域内，光标不会改变。

但是一旦你的鼠标到达正确的位置（在此功能区域内），效果就会出现，请检查：

由于鼠标的位置正好位于要素区域内，所以我可以点击它并获取信息窗口。

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

更新

当鼠标悬停在特定区域时效果才会出现，请检查：

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

Answer 1

他们是否可以使用基于多边形的AREA代码：http://www.w3.org/TR/html4/struct/objects.html#edef-AREA？

根据定义，这些标签不需要是矩形。他们可以使用类似<area shape='poly' coords='...'>的东西，坐标可以根据需要精确定位。

更新：我在回答之前没有机会检查http://maps.google.com，但我现在可以告诉他们没有使用图片地图，因此，功能不是基于在AREA标签上。但是，如果您需要非矩形图像映射叠加的功能，我的初始响应仍然存在。

Answer 2

这使用了javascript，并且显示的实际内容已经从具有display none style属性的div元素中的可用服务器填充。缩放级别16的每个256 x 256图像包含有关x和y以及服务器的信息。在查看谷歌地图时，使用firebug查看更改代码的内容，您会注意到图像列表底部有许多div类，其中包含“css-3d-bug-fix-hack”类。其中一个元素也会有孩子。第一个孩子被隐藏了。只需从该孩子那里删除不显示它就会出现。

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

Answer 3

google.maps.Marker对象可以侦听以下用户事件，例如：

  

'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'

http://code.google.com/apis/maps/documentation/javascript/events.html

GoogleMap使用InfoWindows覆盖Marker上的数据描述。

  

InfoWindows在地图上方的浮动窗口中显示内容。该   信息窗口看起来有点像漫画书气球;它有一个   内容区域和锥形杆，杆的尖端在a   地图上指定的位置。您可以看到正在运行的信息窗口   点击Google地图上的商家标记。 InfoWindow   构造函数接受InfoWindow选项对象，该对象指定一个集合   用于显示信息窗口的初始参数。创作后   信息窗口未添加到地图中。制作信息窗口   可见，你需要调用InfoWindow上的open（）方法，传递   它打开的地图，以及可选的标记   锚定它。 （如果未提供标记，则信息窗口将打开   位置属性。）

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

  

创建标记并使用鼠标悬停事件附加infowindow

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保护伞。 [来自维基百科]