javascript - multiple - ¿El estilo de Google Maps desplaza a cualquiera?
google maps multiple markers (7)
Echa un vistazo al cortador de imágenes de Google Maps Puede tomar cualquier imagen o foto digital y cortarla en mosaicos que se muestran en un mapa de Google. Puede ser una forma rápida de hacer lo que necesita ...
Estoy buscando un complemento de JavaScript (preferiblemente jQuery) para poder desplazarme por una imagen, de la misma manera que funciona Google Maps .
Puedo hacer que la imagen se pueda arrastrar pero luego veo toda la imagen mientras la arrastro, incluso si el div principal está overflow:hidden .
¡Cualquier ayuda sería muy apreciada!
Esto tiene menos que ver con javascript y más que ver con la codificación CSS .
Pruebe algunos experimentos con solo HTML y CSS para que la imagen se recorta correctamente, luego agregue el javascript para moverlo.
Si no puede hacer que clip con HTML, o mueva con la publicación de javascript la demostración más simple del problema aquí para que podamos depurar.
Sin el código estamos disparando en la oscuridad.
Podrías usar la API de google maps ... te permiten usarla con imágenes personalizadas. Y puede elegir si los controles aparecen o no.
EDITAR: Encontré un tutorial decente sobre cómo hacer esto. http://mapki.com/wiki/Add_Your_Own_Custom_Map
Google Maps utiliza imágenes divididas en bloques que se cargan dinámicamente a medida que el usuario avanza en diferentes direcciones. El cortador de imágenes de Google Maps que menciona Paul Dixon es la herramienta que desea para esto.
Si solo desea panoramizar una imagen grande, en lugar de tener la complejidad adicional de dividir la imagen en bloques, en lugar de usar la propiedad de desbordamiento de CSS, debe usar la propiedad de clip . Esto es compatible con todos los navegadores que vale la pena pensar, hasta IE4 si no recuerdo mal.
Un punto a tener en cuenta: la especificación CSS2.1 muestra ejemplos con los valores rect separados por comas. Sin embargo, esto no es compatible con IE6 (quizás tampoco con IE7). Sin embargo, todos los demás navegadores entienden la versión sin comas. Entonces, en lugar de
clip: rect(5px, 40px, 45px, 5px);
Deberías usar
clip: rect(5px 40px 45px 5px);
por compatibilidad.
Necesita un contenedor <div> establecido en posición: relativo al elemento <img>, que luego establece en posición: absoluto.
Entonces la técnica básica es actualizar los valores superiores e izquierdos a medida que el usuario arrastra, usarlos junto con el ancho y alto definidos de la vista en la imagen para crear la cadena rect () adecuada y actualizar la parte superior, izquierda y el clip propiedades de la propiedad de estilo del elemento <img>.
No hagas lo que hice y omita el "px" después de los valores en la cadena rect (). Me llevó años darme cuenta de por qué no estaba funcionando :-)
Puede que llegue un poco tarde a la fiesta, pero solo estaba buscando lo mismo. Lo que encontré es scrollview para jquery, funciona perfecto y hace exactamente este drag-to-scroll similar a google maps para divs desbordados.
(Estoy muy tarde para esta fiesta ahora muerta, pero hey, encontré esta página a través de una búsqueda, así que ...)
El plugin Scrollview sugerido por mooware no funcionó para mí.
Sin embargo Dragscrollable hizo: http://plugins.jquery.com/project/Dragscrollable
Para una buena descripción de la tecnología subyacente, eche un vistazo al Capítulo 4 (si no recuerdo mal) del libro de Pragmatic Programmers Pragmatic Ajax .
Verá cómo funciona el recorte y el recorte de imágenes debajo de las cubiertas. Y el zoom.