谷歌地图里的互动地图里面的互动

我在stackoverflow中问过这个问题，但是我没有得到我想要的最终答案。谷歌地图里的互动地图里面的互动

所以我想再次发布它，并给出更多的细节。

的一部开拓创新后可以found here

当mosue过的地图图块（IMG）功能，将光标改为“指针”，您可以点击正确的地方，那么你会得到informatin窗口。这就是我的意思是“互动”。

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

但是我想知道它怎么会如此精确？

以这种瓷砖作为〔实施例：

enter image description here

要素的区域“雷德利......”是不是正规的矩形，如果你的鼠标是没有这个功能的领域，光标不会改变。

但是，一旦你的鼠标来对了地方，效果会出来（此功能的区域内），检查：

enter image description here

由于鼠标的位置是precisly的区域内该功能，所以我可以点击它并获取信息窗口。

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

更新：

的影响只出来当鼠标在一定的区域，检查：

enter image description here

效果出来只有在突出显示的矩形内的鼠标移动地区，非常精确。

来源

2011-09-01 hguser

是否有可能他们正在使用基于多边形的AREA标记：http://www.w3.org/TR/html4/struct/objects.html#edef-AREA？

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

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

来源

2011-09-01 15:19:06 jcm

这使用JavaScript和实际显示的内容已经从可用服务器填充到div元素中，并显示none样式属性。缩放级别为16的每个256 x 256图像都包含有关x和y以及服务器的信息。在查看谷歌地图时，使用firebug来查看代码的变化，并且您会注意到图像列表底部的很多div元素都带有类“css-3d-bug-fix-hack”。其中一个元素也会有儿童。第一个孩子隐藏。只需从该孩子中删除显示无任何显示，它就会出现。

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

来源

2011-09-01 15:30:18

我知道如何使用DOM事件泡泡来制作我想要的东西，我只是想知道他们如何精确地计算区域。如果可能，请参阅我的更新 – hguser

鼠标位置总是基于像素。在640x480或800x600分辨率下尝试相同，您将看到每个像素的所有变化，而不是在亚像素级别。一旦你获得了鼠标位置，那么它也可以使用子像素位置，但Google不使用子像素位置。所有这些区域都被定义并映射到屏幕上的像素。当我们与Map进行交互时，映射也会得到更新。这是谷歌地图API发挥其作用的地方。看看他们的[Polygon和Ployline功能]（http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polygons） –

他们记录每个区域的功能图标？ – hguser

甲google.maps.Marker对象可以收听到以下用户的事件，例如：

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

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

GoogleMap的使用信息窗口超过叠加数据的说明标记。

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

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); 
});

附加信息窗口

EDITED看完评论后

Google地图广泛使用JavaScript。当用户拖动地图时，网格方块将从服务器下载并插入到页面中。当用户搜索业务时，结果会在后台下载以插入侧面板和地图;该页面不重新加载。位置是通过在地图图像顶部放置一个红色针脚（由几个部分透明的PNG组成）动态绘制的。

使用表单提交的隐藏IFrame，因为它保留了浏览器历史记录。出于性能原因，该站点还使用JSON进行数据传输而不是XML。这些技术都属于广泛的Ajax保护伞。 [编辑]

来源

2011-09-10 18:43:17

谢谢，但信息窗口如何打开不是重点。我关心他们如何触发mousemove事件，只有鼠标进入指定区域时触发事件（显示inforwindow），但此区域不规则。 – hguser

谷歌地图里的互动地图里面的互动

回答

相关问题