谷歌地圖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());和使用位置，你的心臟的內容:-)