javascript - google map come lo scorrimento delle immagini

Question

Voglio creare uno scroller di immagini che funzioni come google map. Quando il sito web viene caricato per la prima volta, ci sarà una finestra di visualizzazione nel mezzo della pagina che contiene parte di un'immagine. Un utente può fare clic e trascinare l'immagine, che scorre, per ispezionare altre aree dell'immagine. Se l'utente dovesse scorrere oltre il perimetro dell'immagine, la scatola caricherà un'immagine adiacente. Voglio anche sovrapporre queste immagini con marcatori che l'utente può fare clic per ingrandire per ulteriori dettagli.

C'è una biblioteca che fa già ciò che voglio? O qualcosa di simile a quello che voglio in modo che possa iniziare a personalizzarlo? O se devo costruire da zero, qualche suggerimento sull'approccio generale da prendere?

Mi piace usare la libreria jquery, quindi qualsiasi cosa creata con jquery sarebbe fantastica.

Answer 1

Dai un'occhiata al plugin jQuery Overscroll.

Answer 2

Ho usato OpenLayers per progetti simili a questo e funziona benissimo! Non basato su jQuery però.

Fornisce mappe gratuite ma è possibile avere anche le proprie immagini.

Answer 3

io non credo che questo fa tutto quello che stai cercando, ma potrebbe essere un buon punto di partenza: SpryMap

Answer 4

Solo per alcune idee di design per tenere conto durante la scrittura/trovare la soluzione:

Ci sono due modi per farlo, uno con più immagini ritagliate che si precaricano quando l'utente scorre vicino a loro, e l'altra che è più semplice e carica una grande immagine.

Se le immagini sono molto grandi, dovresti optare per una soluzione che precarica i segmenti in quanto ciò sarà molto più facile da usare se puoi farlo senza problemi.

L'immagine grande rallenterà notevolmente alcuni computer/dispositivi mobili!

Answer 5

Se hai creato qualcosa da te, probabilmente non potrebbe essere jQuery puro. Dovresti scrivere uno script del server che elabora le tue immagini grandi in segmenti che memorizzi nella cache o servi segmenti al volo. Questo è il punto in cui è possibile iniziare a utilizzare jQuery per controllare cosa viene caricato quando.

Answer 6

Penso che CraftMap sembra fornire quello che stai chiedendo. Ma non sono sicuro che supporti lo zoom.