javascript - mapa de google como desplazamiento de imagen

Question

Quiero construir una imagen de desplazamiento que funcione como google map. Cuando el sitio web se carga por primera vez, habrá un cuadro de visualización en el medio de la página que contiene parte de una imagen. Un usuario puede hacer clic y arrastrar la imagen, que se desplaza, para inspeccionar otras áreas de la imagen. Si el usuario se desplaza más allá del perímetro de la imagen, el cuadro cargará una imagen adyacente. También quiero superponer estas imágenes con marcadores en los que el usuario puede hacer clic para acercarse y obtener más detalles.

¿Hay una biblioteca que hace lo que quiero ya? ¿O algo parecido a lo que quiero para poder empezar a personalizarlo? ¿O si tengo que construir desde cero, cualquier sugerencia sobre el enfoque general a tomar?

Me gusta usar la biblioteca jquery, por lo que cualquier cosa creada con jquery sería increíble.

Answer 1

Eche un vistazo al plugin jQuery Overscroll.

Answer 2

He usado OpenLayers para proyectos similares a este y funciona genial! Sin embargo, no está basado en jQuery.

Proporciona mapas gratuitos, pero también puede tener sus propias imágenes.

Answer 3

no creo que esto hace todo lo que está buscando, pero podría ser un buen punto de partida: SpryMap

Answer 4

Sólo por algunas ideas de diseño a tener en cuenta a la hora de escribir/búsqueda de su solución:

Hay dos formas de hacerlo, una con múltiples imágenes fragmentadas que se cargan previamente cuando el usuario se desplaza cerca de ellas, y la otra que es más simple y carga una imagen grande.

Si su (s) imagen (es) son muy grandes, debe optar por una solución que precargue los segmentos, ya que será mucho más fácil de usar si puede hacerlo sin problemas.

¡La imagen grande ralentizará significativamente algunas computadoras/dispositivos móviles!

Answer 5

Si construyó algo usted mismo, probablemente no podría ser puro jQuery. Querrá escribir un script de servidor que procese sus imágenes grandes en segmentos que almacena en caché o que sirva segmentos sobre la marcha. Ese es el punto en el que podría comenzar a usar jQuery para controlar qué se carga y cuándo.

Answer 6

Creo que CraftMap parece proporcionar lo que estás pidiendo. Pero no estoy seguro si es compatible con el zoom.