Мне интересно, что было бы самым простым подходом, чтобы превратить это:

{x: 0, y: 0, image: 'map_00_00.png',
x: 50, y: 0, image: 'map_01_00.png',
x: 50, y: 50, image: 'map_01_01.png'}

В чем-то вроде Google Map. Я хотел бы остаться с JQuery. Вы бы использовали плагин для перетаскивания? Или просто пойти с некоторыми простыми событиями?

Я думаю, что самым простым подходом было бы загрузить все изображения одновременно, расположить их с помощью CSS и добавить немного перетаскивания, чтобы показать скрытые части области просмотра.

Тем не менее мне очень интересно, что думают другие люди.

1
Vojto 21 Авг 2010 в 15:32

3 ответа

Лучший ответ

Итак, я взломал это утро, и все довольно просто.

  1. Один div расположен в [0, 0] и имеет 100% ширину и высоту.
  2. Внутри находится еще один div, который находится в абсолютном положении, изначально в [0, 0], но этот будет двигаться, когда мы перетаскиваем Кроме того, все внутри этого.
  3. Вы не можете использовать реализацию Dragable в jQuery. Дело в том, что вы не хотите перетаскивать сам div номер 2, потому что вы бы перетаскивали его :-)

Поэтому я реализовал свой собственный метод drag-n-drop, который получает события в верхнем div и перемещает лежащий в основе один. Ознакомьтесь с исходным кодом!

1
Vojto 21 Авг 2010 в 20:51

Ознакомьтесь с проектом OpenLayers. Это реализация интерфейса с открытым исходным кодом (работает так же, как Google Maps). Вы можете получить некоторые идеи оттуда.

1
pablochan 21 Авг 2010 в 11:47

Самый простой способ - добавить пользовательский тип карты к карте Google через API Карт Google. Посмотрите на ImageMapType, который может работать для вы.

0
stefanw 21 Авг 2010 в 11:42