谷歌地图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或复制其example让你开始。

Answer 2

实测值的溶液中another post：

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition()) 

Answer 3

我是有麻烦的投影这里使用该方法拖动地图或创建一个虚拟OverlayView的和使用它的投影后更新。我发现，我在这里工作的100％的解决方案：http://qfox.nl/notes/116

/** 
* @param {google.maps.Map} map 
* @param {google.maps.LatLng} latlng 
* @param {int} z 
* @return {google.maps.Point} 
*/ 
var latlngToPoint = function(map, latlng, z){ 
    var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255 
    var scale = Math.pow(2, z); 
    var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale); 
    return pixelCoordinate; 
}; 
/** 
* @param {google.maps.Map} map 
* @param {google.maps.Point} point 
* @param {int} z 
* @return {google.maps.LatLng} 
*/ 
var pointToLatlng = function(map, point, z){ 
    var scale = Math.pow(2, z); 
    var normalizedPoint = new google.maps.Point(point.x/scale, point.y/scale); 
    var latlng = map.getProjection().fromPointToLatLng(normalizedPoint); 
    return latlng; 
}; 

Answer 4

infowindow是解决这一问题而设计的。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Answer 5

这里是链接到我只是在如何创建谷歌地图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 6

不知何故，没有其他答案为我工作，或者我不想实施它们（例如creating your own custom Marker class）。

经过一番搜索，我发现this solution，虽然，确实正是所需的内容：

function latlngToPoint(map, latLng) { 
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); 
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); 
    var scale = Math.pow(2, map.getZoom()); 
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng); 
    var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); 
    return point; 
} 

然后，只需调用var position = latlngToPoint(map, marker.getPosition());和使用位置，你的心脏的内容:-)