Mapas Google v3 marcador al pasar el ratón sobre herramientas

Question

Quiero poner un texto de ayuda hecho a mí mismo con divs cuando el ratón está sobre un marcador, pero no sé cómo conseguir la posición de la pantalla para poner el div en la posición correcta, aquí está mi código:

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

Es evidente que el método get falla. Cualquier idea?

Answer 1

Este es un asunto difícil. En v2 de la API, que puede hacer:

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

En v3, la fromLatLngToContainerPixel método ha sido movido al objeto MapCanvasProjection. Para obtener un objeto MapCanvasProjection, es necesario llamar a getProjection en un objeto OverlayView. Parece que la clase de marcador se extiende desde OverlayView, pero por desgracia no tiene el método getProjection. No tengo ni idea de por qué - puede valer la presentación de un error

.

La forma en que lo he hecho es mediante la creación de mi propia clase de marcador personalizado, basado en OverlayView, por lo que todavía tiene el método getProjection:

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

Usted puede leer el tutorial de Google en la costumbre superposiciones o copiar su ejemplo para empezar.

Answer 2

Aquí es un enlace a un tutorial que acabo de crear sobre cómo crear un texto de ayuda de Google Maps API V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ Para verlo en acción, vaya aquí http://medelbou.com/demos/google-maps-tooltip/

Answer 3

infowindow está diseñado para resolver este problema. http://code.google.com/apis/maps/documentation /javascript/overlays.html#InfoWindows

Answer 4

De alguna manera, ninguno de la otra respuesta que funcionó para mí o yo no quería ponerlas en práctica (por ejemplo, la creación de su propia clase personalizada marcador ).

Después de un poco más búsqueda encontré esta solución , sin embargo, que lo hace exactamente lo que se necesita:

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

A continuación, sólo llamar var position = latlngToPoint(map, marker.getPosition()); y utilizar la posición al contenido de su corazón: -)

Answer 5

Yo estaba teniendo problemas para conseguir la proyección de actualización después de arrastrar el mapa con el método aquí o la creación de un OverlayView maniquí y el uso de su proyección. He encontrado una solución que funciona al 100% para mí aquí: 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

encontrado una solución en otro post :

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