Как реализовать карту в JavaScript?

Question

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

{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. Я хотел бы остаться с JQuery. Вы бы использовали какой-нибудь плагин для перетаскивания? Или просто пойти с некоторыми простыми событиями?

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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