谷歌地图v3标记鼠标悬停工具提示

Question

当鼠标悬停在标记上时,我想用div制作一个工具提示,但我不知道如何获得屏幕位置将div放在正确的位置,这是我的代码:

google.maps.event.addListener(marker, "mouseover", function() {
            divover.css("left", marker.get("left"));
            divover.css("top", marker.get("top"));
            divover.css("display", "block");
});

google.maps.event.addListener(marker, "mouseout", function() {
            divover.css("display", "none");
});

显然get方法失败了.任何的想法？

Answer 1

这是一个棘手的问题.在API的v2中,您可以执行以下操作:

map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel);

在v3中,方法fromLatLngToContainerPixel已移至MapCanvasProjection对象.要获取MapCanvasProjection对象,需要在OverlayView对象上调用getProjection.看起来Marker类是从OverlayView扩展的,但不幸的是它没有getProjection方法.我不知道为什么 - 可能值得归档一个bug.

我这样做的方法是创建我自己的自定义标记类,基于OverlayView,所以它仍然有getProjection方法:

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);

您可以阅读Google的自定义叠加教程或复制他们的示例以帮助您入门.

Answer 2

这里是我刚刚创建的有关如何为Google Maps API V3创建工具提示的教程的链接:http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript -api-v3 / 要查看它的实际效果,请访问http://medelbou.com/demos/google-maps-tooltip/

Answer 3

infowindow旨在解决这个问题。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows