google maps v3 marcatore mouseover tooltip

Question

Voglio mettere un tooltip fatto io con div quando il mouse si trova sopra un marcatore, ma non so come ottenere la posizione dello schermo per mettere il div in posizione corretta, qui è il mio codice:

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

Ovviamente il metodo get fallisce. Qualsiasi idea?

Answer 1

Questo è un ingannevole. In v2 delle API, si può fare:

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

In v3, il metodo fromLatLngToContainerPixel è stato spostato all'oggetto MapCanvasProjection. Per ottenere un oggetto MapCanvasProjection, è necessario chiamare getProjection su un oggetto OverlayView. Sembra che la classe Marker è esteso dal OverlayView, ma purtroppo non ha il metodo getProjection. Non ho idea del perché - può valere un bug

.

Il modo in cui l'ho fatto è di creare la mia classe di indicatore personalizzato, sulla base di OverlayView, quindi ha ancora il metodo getProjection:

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

Si può leggere il tutorial di Google su personalizzato sovrapposizioni o copiare il loro esempio per iniziare.

Answer 2

Ecco link per un tutorial che ho appena creato su come creare un tooltip per Google Maps API V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ Per vederlo in azione, andate qui http://medelbou.com/demos/google-maps-tooltip/

Answer 3

infowindow è stato progettato per risolvere questo problema. http://code.google.com/apis/maps/documentation /javascript/overlays.html#InfoWindows

Answer 4

In qualche modo, nessuno degli altri risposta ha lavorato per me o io non volevo per la loro attuazione (ad esempio, creare il proprio personalizzato classe Marker ).

Dopo un po 'di più la ricerca ho trovato questa soluzione , però, che fa esattamente ciò che è necessario:

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

Poi basta chiamare var position = latlngToPoint(map, marker.getPosition()); e utilizzare la posizione al contenuto del vostro cuore: -)

Answer 5

I stava avendo difficoltà a raggiungere la proiezione di aggiornamento dopo trascinando la mappa con il metodo qui o la creazione di un OverlayView manichino e con la sua proiezione. Ho trovato una soluzione che funziona al 100% per me qui: 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 6

Trovato una soluzione in un altro post :

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