Javascript JQuery Map перезагрузки

Question

Подобные вопросы уже задавались ранее, но есть кое-что, что мне нужно, и все остальные карты не требуются:

Как я могу создать перетаскиваемую карту, но не с ограниченной областью, а с огромной,части, которые нужно перезагружать при перетаскивании?

Насколько большой я должен сделать перетаскиваемый div?Вплоть до всей потенциальной карты?Или только немного больше, чем видимая область, а затем повторно загрузить детали, прокручиваемые в поле зрения, с динамическим смещением?

Заранее спасибо!

РЕДАКТИРОВАТЬ: нужны перезагруженные детали (которые прокручиваются в поле зрения)быть перезагруженным с сервера.Это карта 1000x1000, видимая область составляет всего около 9x9.

Answer 1

Хорошо, ребята, видя, что никто не хочет на это отвечать: я нашел решение.

Зная размер карты, это не вызывает каких-либо проблем с производительностью при использовании фонового div с соответствующими размерами, например, 15000x15000px или даже больше. Просто создайте родительский контейнер, установите его на overflow: hidden; и поместите в него эту потрясающую карту. Лучше установить абсолютную позицию и переместить ее, адаптируя маржу. Свойства margin-top и margin-left можно легко изменить с помощью JavaScript.

Кроме того, этот огромный div может иметь дочерние элементы. Создайте дочерний элемент, который расположен relative -ly, и заполните этот относительный элемент всем, что вы хотели бы показать на карте, вычисляя расстояния элементов относительно верхнего левого угла мира. Когда карта перемещается, вы можете проверить, превысила ли она определенную точку, и, если она есть, перезагрузить эти элементы через AJAX.

Ваш код будет выглядеть примерно так:

<div id="viewport" style="overflow: hidden;">

    <div id="map" style="position: absolute; width: 15000px; height: 15000px;">

        <div id="container" style="position: relative;">

            <div id="element_1" style="position: absolute; top: 70px; left: 100px; width: 10px; height: 10px;"></div>
            <div id="element_2" style="position: absolute; top: 90px; left: 80px; width: 10px; height: 10px;"></div>
            <div id="element_3" style="position: absolute; top: 60px; left: 10px; width: 10px; height: 10px;"></div>
            <div id="element_4" style="position: absolute; top: 20px; left: 20px; width: 10px; height: 10px;"></div>
            <div id="element_5" style="position: absolute; top: 50px; left: 50px; width: 10px; height: 10px;"></div>

        </div>

    </div>

</div>

Это был бы элемент container, который вы затем повторно добавили бы через AJAX с тем, что должно быть показано в соответствии с полем map.