Không thể sao chép các lát hình ảnh của bản đồ bằng cách sử dụng bản sao jquery

Question

Làm việc trên bản đồ Đường phố mở và paperfold css animation.

tôi đã đặt một bản đồ trong

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

Nhưng nó không thể hiển thị đầy đủ các bản đồ. Tôi không biết lý do chính xác nhưng tôi đoán rằng trong thư viện js không thể sao chép các lát của bản đồ.

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

Vì vậy, sẽ có một cách để sao chép các lát bản đồ hoặc tôi sẽ sai. Nếu vậy làm thế nào tôi có thể đạt được điều này ...

Answer 1

Miễn là bạn có thể truy cập các phần tử gạch bạn có thể sao chép chúng, nhưng (giả sử giao diện hiện giống nhau) chúng xuất hiện được đặt hoàn toàn img thẻ trong OpenStreetMap - div s bị thu gọn, vì vậy bạn cần phải nhân bản các phần tử img (và sử dụng thay vào đó, với vị trí khác nhau, giả sử nó hoạt động với thư viện) hoặc tạo một div, kéo url ra khỏi hình ảnh và áp dụng nó làm nền cho bạn div. Khi gạch được đánh số một cách hợp lý, nếu bạn biết khu vực bạn muốn, bạn có thể chỉ cần bỏ qua bước, có lẽ một cái gì đó như thế này:

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

Các định dạng gốc của OpenStreetMap bản thân có lẽ không cho vay chính nó vào thư viện đặc biệt này (đặc biệt là với các hình ảnh được định vị hoàn toàn), vì vậy tôi nghĩ bạn cần bắt chước bố cục của nó với cấu trúc position: static hơn, tránh các vị trí tuyệt đối và tách nó thành các hàng có thể được gấp lại.