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

Question

使用Open Street地图和paperfold css动画.

我在地图上放了一张地图

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

那么有没有办法克隆地图的瓷砖或我错了.如果是这样我怎么能实现这个......

Answer 1

只要您可以访问图块元素，您就可以克隆它们，但是（假设界面现在相同）它们似乎是imgOpenStreetMap 中绝对放置的标签 - divs 已折叠，因此您需要克隆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，避免绝对位置并将其分成包含的可以折叠的行。