Question

之前已经提出了类似的问题，但是我需要其他所有其他地图，而不是：

我如何设计一个可拖动的地图，但不是有限的区域，而是有一个巨大的地图，其中一部分需要在拖动过程中重新加载？

我应该制作可拖动的div有多大？一直到整个潜在的地图？或者仅略大于可见区域，然后使用动态偏移重新加载滚动到视图中的部分？

提前致谢！

编辑：需要从服务器重新加载重新加载的部分（滚动到视图中）。这是一张1000x1000的地图，可见区域只有9x9左右。

Answer 1

好的，伙计们，看到没有人愿意回答：我找到了解决方案。

了解地图的大小，使用具有相应尺寸的背景div（例如15,000x15000px甚至更多）不会导致任何性能问题。只需创建一个父容器，将其设置为overflow: hidden;并将该巨大的地图放入其中。最好将其位置设置为绝对位置，并通过调整保证金来移动它。可以通过JavaScript轻松修改margin-top和margin-left属性。

此外，巨大的div可以有子元素。创建一个位于relative的子元素，然后用你想在地图上显示的内容填充该相对元素，计算项目相对于世界左上角的距离。移动地图时，您可以检查边距是否超过某个点，如果有，则通过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的边距相对应的任何内容。

Javascript jQuery Map可重新加载

1 个答案: