javascript - 无法使用 jquery clone 克隆 map 的图像图 block

Question

在 Open Street map 和 paperfold CSS animation 上工作.

我在里面放了一张 map

<section class="comment" style="height:250px;">
     <p> <div id="demoMap" style="height:250px;"></div></p>
</section>

但是它不能显示完整的 map 。我不知道确切原因，但我猜是在 js 库中无法克隆 map 的瓦片。

createFold: function(j, topHeight, bottomHeight) {
    var offsetTop = -j * topHeight;
    var offsetBottom = -this.height + j * topHeight + this.foldHeight;
    
    return $('<div>') 
        .addClass('fold')
        .append(
            $('<div>')
                .addClass('top')
                .css('height', topHeight)
                .append(
                    $('<div>')
                        .addClass('inner')
                        .css('top', offsetTop)
                        .append(this.content.clone())
                )
                .add($('<div>')
                .addClass('bottom')
                .css('height', bottomHeight)
                .append(
                    $('<div>')
                        .addClass('inner')
                        .css('bottom', offsetBottom)
                        .append(this.content.clone())
                )
            )
        );
    },

那么是否有一种方法可以克隆 map 的瓦片，或者我做错了。如果是这样，我怎么能做到这一点...

Answer 1

只要您可以访问 tile 元素，您就可以克隆它们，但是(假设界面现在相同)它们似乎是绝对放置的 img OpenStreetMap 中的标签 - div s 已折叠，因此您需要克隆 img元素本身(并使用它，以不同的定位，假设它适用于库)，或创建一个 div , 从图像中提取 url 并将其用作背景 div .由于瓷砖按逻辑编号，如果您知道您想要的区域，您可以跳过这一步，也许是这样的:

var startX = 7,
    endX = 8,
    startY = 3,
    endY = 10,
    scale = 5,
    $parent = $('<div class="map"></div>');

for (var y = startY; y <= endY; y++) {
    var $row = $('<div class="tile-row"></div>');
    for (var x = startX; x <= endX; x++) {
        $row.append(
            $('<img />')
            .attr('src', 'http://path.to.images/'+scale+'/'+x+'/'+y'.png');
        );
        // or:
        // $('<div></div>')
        // .css('background-image', 'http://path.to.images/'+scale+'/'+x+'/'+y'.png');

    };
    $parent.append($fold);
};

OpenStreetMap 本身的原生格式可能不适用于这个特定的库(尤其是其绝对定位的图像)，因此我认为您需要使用更多 position: static 来模仿其布局结构，避免绝对位置并将其拆分为可以折叠的包含行。