google-maps - 谷歌地图 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 方法。我不知道为什么 - 可能值得提交一个错误。

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

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

您可以在 custom overlays 上阅读 Google 的教程。或复制他们的 example让你开始。