Pytanie Styl Google Maps przewijanie ktoś?


Szukam wtyczki JavaScript (najlepiej jQuery), aby móc przewijać obraz w ten sam sposób mapy Google Prace.

Mogę sprawić, aby obraz był przeciągany, ale wtedy widzę cały obraz podczas przeciągania, nawet jeśli jest to div rodzicielski overflow:hidden.

Każda pomoc będzie bardzo ceniona!


19
2017-09-15 20:32


pochodzenie




Odpowiedzi:


Może trochę spóźniłem się na imprezę, ale ja po prostu szukałem tego samego. To, na co natknąłem się, to scrollview dla jquery działa perfekcyjnie i wykonuje dokładnie to mapy google - jak przeciąganie w celu przewinięcia div.


3
2017-08-20 02:06



dzięki, dokładnie tego potrzebowałem, zachowałem to dla przyszłości - sydlawrence


(Jestem super spóźniony na tę nieżyjącą już imprezę, ale hej, znalazłem tę stronę poprzez wyszukiwanie, więc ...)

Wtyczka Scrollview zasugerowana przez mooware nie działała dla mnie.

jednak Dragscrollable zrobił: http://plugins.jquery.com/project/Dragscrollable

Wypróbuj demonstrację


10
2018-06-23 06:24





Sprawdź Google Maps Image Cutter Może wykonać dowolne zdjęcie lub zdjęcie cyfrowe i przyciąć je do kafelków wyświetlanych na mapie Google. Może być szybki sposób na zrobienie tego, czego potrzebujesz ...


3
2017-09-15 20:38





Możesz użyć api mapy Google ... pozwalają ci na używanie go z niestandardowymi obrazami. Możesz wybrać, czy kontrolki się pojawią, czy nie.

EDYCJA: Znalazłem przyzwoity samouczek, jak to zrobić. http://mapki.com/wiki/Add_Your_Own_Custom_Map


2
2017-09-15 20:34



mimo że jest to zaakceptowana odpowiedź, miałem nadzieję na odpowiedź jQuery, a nie kolejny kompletnie inny skrypt do uwzględnienia. - Moak
Wiem, że ta odpowiedź została wydana 3 lata temu. Muszę jednak nadmienić, że Google zamierza zapłacić za model interfejsu API Map Google; dlatego jeśli używasz własnych zdjęć, najgorszą alternatywą jest Google Maps. - Lashae


Aby zapoznać się z dobrym opisem technologii, spójrz na rozdział 4 (jeśli dobrze pamiętam) z książki Pragmatic Programmers Pragmatyczny Ajax.

Zobaczysz, jak krojenie i krojenie obrazu działa pod kołdrą. I powiększanie.


2
2017-09-15 20:51



orki pod kołdrą! Zawsze myślałem, że to elfy na monitorze przesuwają obrazy po przeciągnięciu ... - Coxy


Ma to mniej wspólnego z javascript i ma więcej wspólnego z Kodowanie CSS.

Wypróbuj kilka eksperymentów z samym HTML i CSS, aby uzyskać poprawny obraz, a następnie dodaj javascript, aby go przenieść.

Jeśli nie możesz go nagrać za pomocą HTML lub przenieść z postem javascript, to najprostsza demonstracja problemu jest dla nas do debugowania.

Bez kodu kręcimy w ciemności.


1
2017-09-15 20:40



Wygląda na to, że html i css są problemem, podczas gdy nie przeciągając, obraz jest przycinany w div rodzica, ale przeciągalna wtyczka (jquery.interface) powoduje ponowne wyświetlenie całego obrazu - sydlawrence


Serwis Mapy Google wykorzystuje obrazy pokrojone w bloki, które są dynamicznie ładowane, gdy użytkownik porusza się w różnych kierunkach. The Google Maps Image Cutter Paul Dixon wspomina o narzędziu, które chcesz w tym celu.

Jeśli chcesz tylko przesuwać jeden duży obraz, zamiast mieć dodatkową złożoność krojenia obrazu na bloki, zamiast używać właściwości przepełnienia CSS, powinieneś użyć spinacz własność. Jest to obsługiwane we wszystkich przeglądarkach, o których warto myśleć, aż do IE4, jeśli dobrze pamiętam.

Jeden punkt do zapamiętania: specyfikacja CSS2.1 pokazuje przykłady z prostymi wartościami oddzielonymi przecinkami. Jednak nie jest to obsługiwane przez IE6 (być może nie jest to IE7). Jednak wszystkie inne przeglądarki rozumieją wersję bez przecinków. Zamiast tego

clip: rect(5px, 40px, 45px, 5px);

powinieneś użyć

clip: rect(5px 40px 45px 5px);

dla kompatybilności.

Potrzebujesz kontenera <div> ustawionego w pozycji: względny wokół elementu <img>, który następnie ustawiasz w pozycji: absolute.

Tak więc podstawową techniką jest aktualizacja górnych i lewych wartości podczas przeciągania przez użytkownika, użycie ich razem ze zdefiniowaną szerokością i wysokością widoku na obrazie w celu utworzenia odpowiedniego ciągu znaków rect () oraz zaktualizowania górnej, lewej i klipu właściwości właściwości stylu elementu <img>.

Nie rób tego, co zrobiłem i pomijaj "px" po wartościach w ciągu rect (). Zajęło mi wieki, aby zrozumieć, dlaczego to nie działa :-)


0
2017-09-18 20:35