Javascript jQuery地图可重载

Javascript jQuery Map reloadable

本文关键字：重载 地图 jQuery Javascript      更新时间：2023-09-26

以前也有人问过类似的问题，但有一些东西是我需要的，所有其他地图都不需要:

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

我应该把可拖动的div设置多大?一直到整个势能图?或者只比可见区域稍大一点，然后用动态偏移量重新加载滚动到视图中的部件?

提前感谢!

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

好了，伙计们，既然没人想回答这个问题，我找到解决办法了。

知道地图的大小，使用具有相应尺寸的背景div不会导致任何性能问题，例如15,000x15000px甚至更大。只需创建一个父容器，将其设置为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的边距相应的任何内容。

相关文章：