Could not克隆使用jQuery克隆地图的图像瓷砖

在开放街道地图和paperfold css animation工作。Could not克隆使用jQuery克隆地图的图像瓷砖

我已经把地图在

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

那么将有一种方法来克隆地图的瓷砖或我会出错。如果是的话我怎么能达到这个...

来源

2013-03-06 troy

只要你可以访问瓷砖元素，你可以克隆他们，但（假设现在接口相同），他们似乎绝对放置在OpenStreetMap img标签 - 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结构来模仿它的布局，避免绝对位置并将它分解成可折叠的包含行。

来源

2015-02-06 12:13:43 Truffula

Could not克隆使用jQuery克隆地图的图像瓷砖

回答

相关问题