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克隆地圖的圖像瓷磚

回答

相關問題