google maps v3 marker toolover

Question

Tôi muốn đặt một chú giải công cụ làm cho bản thân mình với div khi con chuột trên một điểm đánh dấu, nhưng tôi không biết làm thế nào để có được vị trí màn hình để đưa div vào đúng vị trí, đây là mã của tôi:

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"); 
}); 

Rõ ràng phương thức tải không thành công. Bất kỳ ý tưởng?

Answer 1

Đây là một điều khó khăn. Trong v2 của API, bạn có thể làm:

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

trong v3, phương pháp fromLatLngToContainerPixel đã được chuyển đến các đối tượng MapCanvasProjection. Để có được một đối tượng MapCanvasProjection, bạn cần gọi getProjection trên một đối tượng OverlayView. Có vẻ như lớp Marker được mở rộng từ OverlayView, nhưng tiếc là nó không có phương thức getProjection. Tôi không biết tại sao - có thể đáng để nộp một lỗi.

Con đường tôi đã thực hiện nó là bằng cách tạo riêng lớp tùy chỉnh điểm đánh dấu của tôi, dựa trên OverlayView, vì vậy nó vẫn có phương pháp getProjection:

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

Bạn có thể đọc hướng dẫn của Google trên custom overlays hoặc sao chép example của họ để giúp bạn bắt đầu.

Answer 2

Tìm thấy một giải pháp trong another post:

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

Answer 3

tôi đã gặp khó khăn chiếu để cập nhật sau khi kéo bản đồ bằng cách sử dụng phương pháp này đây hoặc tạo ra một overlayview giả và sử dụng chiếu của nó. Tôi tìm thấy một giải pháp mà làm việc 100% đối với tôi ở đây: 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 được thiết kế để giải quyết vấn đề này. http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Answer 5

Dưới đây là liên kết đến một hướng dẫn, tôi vừa tạo về cách tạo một tooltip cho Google Maps API V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ Để nhìn thấy nó trong hành động, hãy vào đây http://medelbou.com/demos/google-maps-tooltip/

Answer 6

Bằng cách nào đó, không ai trong số các câu trả lời khác đã làm việc cho tôi hoặc tôi không muốn thực hiện chúng (ví dụ: creating your own custom Marker class).

Sau khi tìm kiếm một số chi tiết tôi thấy this solution, tuy nhiên, điều đó không chính xác những gì cần thiết:

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; 
} 

Sau đó, chỉ cần gọi var position = latlngToPoint(map, marker.getPosition()); và sử dụng vị trí để :-) nội dung của trái tim của bạn