17

Ich möchte eine Tooltip gemacht mir divs, wenn die Maus über einen Marker ist, aber ich weiß nicht, wie man die Bildschirmposition, um das div auf die richtige Position zu setzen, hier ist Mein Code:google maps v3 marker mouseover tooltip

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

Offensichtlich schlägt die Get-Methode fehl. Irgendeine Idee?

Antwort

15

Dies ist ein schwieriger. In v2 der API können Sie tun:

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

In v3 ist das Verfahren fromLatLngToContainerPixel zum MapCanvasProjection Objekt verschoben. Um ein MapCanvasProjection-Objekt zu erhalten, müssen Sie getProjection für ein OverlayView-Objekt aufrufen. Es sieht so aus, als ob die Marker-Klasse von OverlayView erweitert wurde, aber leider nicht über die getProjection-Methode. Ich habe keine Ahnung warum - vielleicht lohnt es sich, einen Fehler zu machen.

So wie ich es meine eigene benutzerdefinierte Marker-Klasse, indem auf Overlay basiert getan haben, so ist es immer noch die getProjection Methode:

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

Sie die Google-Tutorial auf custom overlays lesen oder kopieren ihre example um dich zu fangen.

+0

Dank verwenden, schließlich Ich tat das, aber etwas, das ich in 2 Zeilen Code auflösen konnte, war extrem komplex und es dauerte mehrere Stunden. – Santiago

+2

Es sollte viel einfacher sein, also habe ich diesen Fehler eingereicht: http://code.google.com/p/gmaps-api-issues/issues/detail? id = 2342 Wenn (if) fest ist, 'var point = marker.getProjection(). FromLatLngToDivPixel (marker.getPosition());' sollte funktionieren. – dave1010

0

eine Lösung in another post Gefunden:

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

Dies gibt den Bildschirm Pixel relativ zur oberen linken Ecke nicht. Stattdessen gibt es der Welt Koordinate. – Hoque

1

Ich habe Schwierigkeiten, den Vorsprung immer seine Projektion zu aktualisieren, nachdem die Karte mit der Methode hier oder einen Dummy-Overlay zog die Erstellung und Verwendung. Ich fand eine Lösung, die hier für mich zu 100% funktioniert: 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; 
}; 
+0

Nicht genau sicher warum, aber diese Lösung funktionierte nicht für mich, die Koordinaten waren immer noch aus. Ich habe jedoch diese Lösung gefunden: http: // a32.ich/2012/03/position-custom-und-fancy-overlay-dialog-auf-google-maps-v3/- und das hat perfekt funktioniert! – Oliver

9

Hier Link zu einem Tutorial ich gerade erstellt, wie ein Tooltip für Google Maps API V3 zu erstellen: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ Um es in Aktion zu sehen, gehen Sie hier http://medelbou.com/demos/google-maps-tooltip/

+2

Willkommen bei Stack Overflow! Während dies die Frage theoretisch beantworten könnte, [wäre es vorzuziehen] (http://meta.stackexchange.com/q/8259), die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. – oers

+1

Das war einfach hinzuzufügen und funktioniert gut markerclustererplus. – johntrepreneur

3

Irgendwie keiner der anderen Antwort hat für mich gearbeitet oder ich wollte sie nicht implementieren (zB creating your own custom Marker class).

Nach weiterer Suche fand ich this solution, aber das tut genau, was gebraucht wird:

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

Dann var position = latlngToPoint(map, marker.getPosition()); einfach anrufen und um die Position zu Inhalt Ihres Herzens :-)

+0

oops. sprach zu bald. Es funktioniert in einigen Fällen und nicht in anderen. irgendwie verblüfft von der Variabilität. – elrobis

+0

@elrobis: Sagen Sie, dass Sie ein Problem mit dem Code in meiner Antwort haben? Haben Sie Fehler in der Javascript-Konsole Ihres Browsers? Was ist das gebrochene Verhalten? – Oliver

+0

ahh hey man. nein, es funktionierte später, aber ich hatte diese Seite schon geschlossen. Ich habe etwas Dummes gemacht, wie den '.x' Wert den' x' und 'y' Positionen zuzuordnen. Und da ich eine Testkarte hatte, die auf einen Punkt zentriert war (also waren 'x' und' y' fast gleich), schien es zu funktionieren, aber die Punkte ringsum verhielten sich wahnsinnig. Zuerst schien es zu funktionieren - der Kommentar, den ich gelöscht habe -, dann überprüfte ich die anderen Punkte und dachte, ich hätte zu früh gesprochen. Später, als ich verrückt wurde, wurde mir klar, dass ich einen der Werte wiederverwendete. :: head slap :: smh ..:/ – elrobis