Стиль Google Maps прокручивает всех?

Ответ 1

Возможно, я немного опоздал на вечеринку, но я просто искал то же самое. То, что я наткнулся на scrollview для jquery, отлично работает и делает именно эти карты google как перетаскивание в прокрутку для переполненных divs.

Ответ 2

(Я слишком поздно опоздал на эту мертвую вечеринку, но, эй, я нашел эту страницу с помощью поиска, так что...)

Плагин Scrollview, предложенный mooware, не работал у меня.

Однако Dragscrollable сделал: http://plugins.jquery.com/project/Dragscrollable

Попробуйте демонстрацию

Ответ 3

Посмотрите Google Cart Image Cutter Он может принимать любое изображение или цифровую фотографию и вырезать ее в виде плиток, которые отображаются на карте Google, Возможно, это быстрый способ сделать то, что вам нужно...

Ответ 4

Вы можете использовать карты google api... они позволяют использовать его с пользовательскими изображениями. И вы можете выбрать, появятся ли элементы управления или нет.

EDIT: нашел достойный учебник о том, как это сделать. http://mapki.com/wiki/Add_Your_Own_Custom_Map

Ответ 5

Для хорошего описания базовой технологии смотрите главу 4 (если я правильно помню) книги Прагматичных программистов Pragmatic Ajax.

Вы увидите, как обрезка изображения и обработка накипи работают под обложками. И масштабирование.

Ответ 6

Это меньше связано с javascript и больше связано с CSS-кодировкой.

Попробуйте несколько экспериментов с просто HTML и CSS, чтобы получить изображение для правильного клипа, а затем добавьте javascript для его перемещения.

Если вы не можете получить его для клипа с помощью HTML или переместить с сообщением javascript простейшую демонстрацию проблемы здесь для отладки.

Без кода, который мы снимаем в темноте.

Ответ 7

В Картах Google используются изображения, нарезанные на блоки, которые динамически загружаются, когда пользователь работает в разных направлениях. Google Cutter изображений Google Пол Диксон упоминает инструмент, который вы хотите для этого.

Если вы просто хотите панорамировать одно крупное изображение, а не иметь дополнительную сложность разбиения изображения на блоки, вместо этого вместо использования свойства переполнения CSS вы должны использовать clip. Это поддерживается во всех браузерах, о которых стоит подумать, вплоть до IE4, если я правильно помню.

Обратите внимание: спецификация CSS2.1 показывает примеры с значениями rect, разделенными запятыми. Однако это не поддерживается IE6 (возможно, не IE7, либо). Однако все другие браузеры понимают версию без запятых. Поэтому вместо

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

вы должны использовать

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

для совместимости.

Вам нужен контейнер <div> установленное в положение: относительно вокруг <img> элемент, который вы затем установите в положение: абсолютное.

Таким образом, основной способ состоит в том, чтобы обновить верхнее и левое значения при перетаскивании пользователя, использовать их вместе с определенной шириной и высотой представления на изображении, чтобы создать соответствующую строку rect(), и обновить верхнюю, левую, и свойства клипа <img> элемент style style.

Не выполняйте то, что я сделал, и оставьте "px" после значений в строке rect(). Мне потребовались годы, чтобы понять, почему он не работает: -)