Google Maps v3 Marker Tooltip Mouseover

StackOverflow https://stackoverflow.com/questions/2669727

Frage

Ich möchte einen Tooltip setzen habe mich mit divs, wenn die Maus über einen Marker ist, aber ich weiß nicht, wie die Bildschirmposition zu erhalten, die div auf die richtige Position zu bringen, hier ist mein Code: 

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 ist die get-Methode fehlschlägt. Jede Idee?

War es hilfreich?

Lösung

Dies ist eine schwierige Sache. 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 auf einem Overlay Objekt aufzurufen. Es sieht aus wie die Marker-Klasse von Overlay verlängert wird, aber leider ist es nicht die getProjection Methode hat. Ich habe keine Ahnung, warum - kann sich lohnen, einen Fehler Einreichung

.

So wie ich es getan habe, ist durch meine eigene benutzerdefinierte Marker-Klasse erstellen, basierend auf Overlay, so ist es immer noch die getProjection Methode hat: 

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

Sie können die Google-Tutorial auf href="http://code.google.com/apis/maps/documentation/v3/overlays.html#CustomOverlays" lesen Overlays oder kopieren ihre Beispiel zum Einstieg.

Andere Tipps

Hier ist 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 zu sehen, sie in Aktion, hier gehen http://medelbou.com/demos/google-maps-tooltip/

Irgendwie keiner der anderen Antwort für mich gearbeitet oder ich wollte nicht, sie umzusetzen (zB Ihre eigene Marker-Klasse erstellen ).

Nach weiterer Suche gefunden: diese Lösung , aber das tut genau , was nötig ist: 

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 verwenden: -)

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

Gefunden eine Lösung in eine andere Stelle : 

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top