wake-up-neo.net

google Maps v3-Marker Mouseover-Tooltip

Ich möchte einen Tooltip mit divs erstellen, wenn sich der Mauszeiger über einer Markierung befindet, aber ich weiß nicht, wie ich die Bildschirmposition erreichen kann, um das div an die richtige Position zu bringen.

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?

18
Santiago

Dies ist eine heikle Sache. In Version 2 der API können Sie Folgendes tun:

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

In Version 3 wurde die Methode fromLatLngToContainerPixel in das MapCanvasProjection-Objekt verschoben. Um ein MapCanvasProjection-Objekt abzurufen, müssen Sie getProjection für ein OverlayView-Objekt aufrufen. Es sieht so aus, als ob die Marker-Klasse von OverlayView erweitert wird, aber es gibt leider keine getProjection-Methode. Ich habe keine Ahnung, warum - es sich möglicherweise lohnt, einen Fehler zu beheben.

So habe ich es gemacht, indem ich meine eigene benutzerdefinierte Markierungsklasse auf der Grundlage von OverlayView erstellt habe, so dass sie immer noch die getProjection-Methode besitzt:

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

Sie können das Google-Tutorial zu benutzerdefinierten Überlagerungen lesen oder deren example kopieren, um den Einstieg zu erleichtern.

16
dave1010

Hier ist ein Link zu einem Tutorial, das ich gerade erstellt habe, um einen 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/

9
mohamed elbou
4
Steven Benjamin

Irgendwie funktionierte keine der anderen Antworten für mich, oder ich wollte sie nicht implementieren (z. B. Erstellen einer eigenen benutzerdefinierten Marker-Klasse ).

Nach einigem Suchen habe ich diese Lösung gefunden, aber genau was benötigt 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 rufe einfach var position = latlngToPoint(map, marker.getPosition()); auf und nutze die Position nach Herzenslust :-)

3
Oliver

Ich hatte Probleme mit der Aktualisierung der Projektion, nachdem ich die Karte mit der hier beschriebenen Methode gezogen oder eine Dummy-Überlagerungsansicht erstellt und ihre Projektion verwendet hatte. Ich habe hier eine Lösung gefunden, die 100% für mich 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; 
};
1
CapnChaos

Eine Lösung gefunden in einem anderen Beitrag :

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