Visualización de puntos de mira en el centro de un mapa de Google de Google

Question

Me gustaría mostrar un punto de mira/retícula que está fijo en el centro de un mapa de Google, al igual que Wikimapia.org. Desafortunadamente están usando v2 de la API y estoy usando v3.

El punto de mira debe permanecer fijo en el centro mientras el usuario mueve el mapa.

No existe la opción CENTER para la enumeración ControlPosition, así que imagino que cualquier solución será un poco hacky.

He tratado de superponerlo como un div fuera del mapa, pero no he logrado mostrarlo en la parte superior del mapa, parece que se superó en un enfrentamiento de orden z.

Answer 1

La solución dada no funcionó para mí, porque el div superpuesto crea un punto muerto en el mapa. Una mejor solución para mi proyecto, utilizando Google Maps JavaScript API V3, era crear la retícula en el mapa como un marcador con una forma de rectángulo de 1 píxel. Luego use el evento maps bounds_changed para volver a centrar el marcador.

La imagen del retículo es 63 x 63 png. (Imágenes/reticle.png)

Definir la imagen y forma del marcador ...

var reticleImage = new google.maps.MarkerImage(
    'images/reticle.png',   // marker image 
    new google.maps.Size(63, 63), // marker size 
    new google.maps.Point(0,0),  // marker origin 
    new google.maps.Point(32, 32)); // marker anchor point 
    var reticleShape = { 
    coords: [32,32,32,32],   // 1px 
    type: 'rect'      // rectangle 
    }; 

Después de la creación de nuestro mapa (main_map) añadimos el marcador ...

reticleMarker = new google.maps.Marker({ 
    position: latlng, 
    map: main_map, 
    icon: reticleImage, 
    shape: reticleShape, 
    optimized: false, 
    zIndex: 5 
    }); 

Aquí var latlng es el mismo objeto LatLng usado para crear main_map. El zIndex debe ser mayor que cualquier otro marcador zIndex, para mantener la retícula en la parte superior.

Luego agregamos un controlador de eventos al que se llamará cuando se active el mapa bounds_changed.

google.maps.event.addListener(main_map, 'bounds_changed', centerReticle); 

y finalmente tenemos la función centerReticle().

function centerReticle(){ 
    reticleMarker.setPosition(main_map.getCenter()); 
    } 

Dado que no estamos haciendo otra cosa con el evento 'bounds_changed' podemos poner en orden el código pasando una función anónima a la llamada addListener ... Esto nos evita tener que definir la centerReticle() función.

google.maps.event.addListener(main_map, 'bounds_changed', 
     function(){reticleMarker.setPosition(main_map.getCenter());}); 

En realidad, funciona bastante resbaladizo. Espero que esto ayude a otros.

Gracias.

Saltar

Answer 2

Bueno, soy un tonto y estaba haciendo esto más difícil de lo que debería ser.

En lugar de borrar la pregunta, he aquí una solución en caso de que ayuda a otra persona a cabo:

<div id="container"> 
    <div id="map"></div> 
    <div id="reticule"><img src="reticule.gif" /></div> 
</div> 

Y algunos estilos:

#container { position:relative; } 
#map { height:100%; width:100%; } 
#reticule { 
    position:absolute; 
    width:13px; 
    height:13px; 
    left:50%; 
    top:50%; 
    margin-top:-8px; 
    margin-left:-8px; 
    pointer-events: none; 
} 

Ese no es el centro exacto del mapa

Answer 3

estoy usando la solución que encontré en DaftLogic.com.Parece ser básicamente la misma solución que BentFX pero mucho más escueta.

var marker = new google.maps.Marker({ 
    map: map, 
    icon: '/images/reticle.png' 
}); 
marker.bindTo('position', map, 'center'); 

Por desgracia, también sufre el problema de Drew señaló en el punto de mira no están fijados de forma permanente al centro del mapa. Si arrastra el mapa rápidamente o acerca y aleja la imagen, verá que la cruz se mueve un poco hasta que tenga tiempo para volver a acercarse. Si a alguien se le ocurre una solución mejor, háganoslo saber.