无法使用 jquery clone 克隆地图的图像图块

Posted 2023-02-22

【中文标题】无法使用 jquery clone 克隆地图的图像图块

【英文标题】：Couldnt clone the image tiles of map using jquery clone

【发布时间】：2013-02-21 07:57:00

【问题描述】：

处理开放街道地图和paperfold CSS animation。

我已经在地图中放置了

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

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

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())
                )
            )
        );
    ,

那么有没有办法克隆地图的瓦片或者我错了。如果是这样，我怎么能做到这一点...

【参考方案1】：

只要您可以访问磁贴元素，您就可以克隆它们，但是（假设界面现在相同）它们似乎绝对放置在 OpenStreetMap 中的 img 标签 - divs 已折叠，所以您'd需要克隆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 结构来模仿它的布局，避免绝对位置并将其拆分为可以折叠的包含行。