web-dev-qa-db-fra.com

google maps v3 marqueur mouseover tooltip

Je veux mettre une info-bulle créée moi-même avec des divs lorsque la souris est au-dessus d'un marqueur, mais je ne sais pas comment obtenir la position de l'écran pour placer la div à la bonne position, voici mon 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");
});

De toute évidence, la méthode get échoue. Une idée?

google-mapstooltipmouseovergoogle-maps-api-3google-maps-markers
18
Santiago

Ceci est un problème. Dans la v2 de l'API, vous pouvez faire:

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

Dans la v3, la méthode fromLatLngToContainerPixel a été déplacée vers l'objet MapCanvasProjection. Pour obtenir un objet MapCanvasProjection, vous devez appeler getProjection sur un objet OverlayView. Il semble que la classe Marker ait été étendue à partir de OverlayView, mais malheureusement, elle n’a pas la méthode getProjection. Je ne sais pas pourquoi - cela peut valoir la peine de rapporter un bogue.

Pour ce faire, j'ai créé ma propre classe de marqueurs personnalisée, basée sur OverlayView, de sorte qu'elle utilise toujours la méthode getProjection:

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

Vous pouvez lire le didacticiel de Google sur les superpositions personnalisées ou copier leur exemple pour vous aider à démarrer.

16
dave1010

Voici un lien vers un tutoriel que je viens de créer sur la création d'une info-bulle pour l'API Google Maps V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps -javascript-api-v3/ Pour le voir en action, allez ici http://medelbou.com/demos/google-maps-tooltip/

9
mohamed elbou

infowindow est conçu pour résoudre ce problème . http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

4
Steven Benjamin

D'une manière ou d'une autre, aucune autre réponse ne fonctionnait pour moi ou je ne voulais pas les implémenter (par exemple, créer votre propre classe de marqueur personnalisée ).

Après quelques recherches supplémentaires, j'ai trouvé cette solution , cependant, c'est ce qui est nécessaire exactement:

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

Ensuite, appelez simplement var position = latlngToPoint(map, marker.getPosition()); et utilisez la position à votre guise :-)

3
Oliver

J'avais du mal à mettre à jour la projection après avoir fait glisser la carte en utilisant la méthode décrite ici ou en créant une superposition avec image factice et en utilisant sa projection. J'ai trouvé une solution qui fonctionne à 100% pour moi ici: 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

A trouvé une solution dans un autre post :

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