Google Maps API V3 fromDivPixelToLatLng no es coherente

Question

Necesito colocar un marcador en una ubicación de píxel fija dentro del div del mapa. Para instanciar un marcador, necesita un LatLng. Entiendo que fromDivPixelToLatLng() es la forma de convertir las coordenadas de píxeles a LatLng, pero no puedo lograr que se comporte de manera coherente.

He publicado un ejemplo simple de mi problema en http://www.pinksy.co.uk/newsquare/overlaytest.html. Haga clic en el mapa para colocar un marcador a 200px/200px. Arrastra el mapa y vuelve a hacer clic. Esperaba que un marcador se colocara a 200px/200px cada vez, pero este no es el caso.

Primero estableció el mapa como de costumbre, en un 600px por 300px div:

var london = new google.maps.LatLng(51.501904,-0.130463); 
var mapOptions = { 
    zoom: 15, 
    center: london, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

Luego de crear una plantilla:

var overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 

Para probar fromDivPixelToLatLng(), se crea un clic evento en el mapa, que intenta colocar un marcador en la ubicación de píxel 200px/200px. Independientemente de donde se arrastra el mapa, esperaba que el marcador siempre se pondrán a 200px/200px:

google.maps.event.addListener(map, 'click', function(event) { 

    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(200,200)); 

    var marker = new google.maps.Marker({ 
     position: pixelLatLng, 
     map: map 
    }); 
}); 

Sin embargo, arrastre el mapa alrededor, y se verá que el marcador no se coloca siempre a 200 píxeles/200px. ¿Algunas ideas?

Gracias!

Answer 1

Después de la experimentación, he encontrado que desdeContainerPixelToLatLng() es lo que estoy buscando. Para el beneficio de otros, he publicado un ejemplo en http://www.pinksy.co.uk/newsquare/overlaytest2.html.

(Para el registro, todavía estoy seguro de por qué fromDivPixelToLatLng comporta como lo hace, pero no importa!)

Answer 2

Comprobar la demo en: http://jsbin.com/otidih/51 para algunos experimentos más sobre esto. Para iniciar la sesión, inicie la consola: la mayoría de las cosas se registran allí.

explicación detallada de esta groups post. debajo Una versión más corta:

El ContainerPixel se calcula en relación a su mapa recipiente. Si desplaza el mapa, cambia ContainerPixel de LatLngs. El ContainerPixel de cosas que no se mueven con el mapa (flotante) no cambia. Por ejemplo, el ContainerPixel del centro del mapa sigue siendo el mismo si no se cambia el tamaño del mapa:

overlay.getProjection().fromLatLngToContainerPixel(map.getCenter()) 

La relación DivPixel se calcula a una enorme Div que mantiene toda la tilespace para el mundo en el nivel de zoom actual.

overlay.getProjection().fromLatLngToDivPixel(point) 

Si usted no cambia el nivel de zoom y mover (PAN), el mapa, entonces el DivPixel de todo lo que se mueve con el mapa se mantendrá igual. Por ejemplo, DivPixel de una ciudad determinada en un mapa seguirá siendo el mismo, incluso si mueve el mapa.Solo cambiará cuando cambie el nivel de zoom o cruce la fecha internacional.

Tenga en cuenta que el punto de referencia real utilizado para el cálculo de la DivPixel consigue restablecer cada vez que el mapa zoom, por lo que la misma LatLng puede tener diferentes valores DivPixel incluso cuando se llega de nuevo al mismo nivel de zoom.

También hay que considerar es el valor Point regresar de

map.getProjection().fromLatLngToPoint() 

que está bien explicado en la API Reference Se traduce desde el cilindro LatLng al plano punto grande, que se mantiene siempre la misma (sin importa qué nivel de zoom). Dado LatLngs siempre se asignará al mismo Punto.

El punto (0,0) es el (85,0511287798066, -180) LatLng - dónde Mapa Google de cortes (si quieres saber por qué, leyó sobre la Mercator projection)