Question

我非常喜欢Trulia.com创建自定义Google Map InfoWindows的方式。

特别喜欢Trulia实施InfoWindow的是：

延伸到地图边框以外：Google地图InfoWindows包含在地图边框内，而Trulia似乎可以在地图上浮动
始终在地图中心附近显示InfoWindow ：Google地图InfoWindows始终在标记上方显示InfoWindow ，而Trulia InfoWindows始终将InfoWindow显示为尽可能靠近地图中心。例如，如果地图标记图标位于边框附近的地图顶部，则Trulia InfoWindow将显示在下方地图标记图标
InfoWindow显示在鼠标悬停（而不是“点击”）：使用默认的Google Maps InfoWindow，您必须“点击”地图标记图标才能显示InfoWindow，而Trulia InfoWindows只显示将鼠标悬停在地图标记图标上。

我找到了PdMarker，这是Google Map InfoWindows的第三方扩展程序，可以完成大部分上述项目符号，但不是全部。 1）它不会超出地图边界，2）它不适用于Google Maps API版本3（仅限版本2）。

任何人都知道Trulia如何在Google Maps API v3上完成类似InfoWindow的实施？

Answer 1

这是一个有趣的问题。我最近也一直在玩地图。我远非专家，但我可以告诉你我所知道的。

我认为您提到的网站使用的是自定义div叠加而不是谷歌的信息窗口。

<强> 1。 InfoWindow显示在鼠标悬停（不是“点击”）

上

这可以通过事件监听器来完成。例如，在地图API v3中：

google.maps.event.addListener(marker, 'mouseover', function() {
   // myDiv.style.visibility = 'visible'
});
google.maps.event.addListener(marker, 'mouseout', function() {
  // myDiv.style.visibility = 'hidden'
});

以下是pretty good example如何做到这一点。

<强> 2。延伸到地图边界以外
3.始终在地图中心附近显示InfoWindow

使用CSS可以实现这两个目标：（2）使用z-index和（3）使用position。

使用you can find here的自定义标记工具提示有一个类似的示例。它还显示了如何通过将鼠标悬停在页面上的其他元素来利用鼠标悬停来弹出工具提示。

myElement.onmouseover = function(){
  google.maps.event.trigger(marker, 'mouseover');
}
myElement.onmouseout = function(){
  google.maps.event.trigger(marker, 'mouseout');
}

最后，another site充分利用了地图，尽管这个使用了API的V2。希望这会有所帮助。

Answer 2

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

是谷歌地图的扩展，允许您创建自定义信息窗口

谷歌地图：Trulia如何创建自定义InfoWIndows？

2 个答案: