2013-03-06 17 views
7

Open Street haritalarında ve paperfold css animation'da çalışma harita görüntüsünü kopyalayamadı.JQuery clone

Ben

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

bir harita vermiş Ama tam haritayı göstermek olamazdı. Tam sebebi bilmiyorum ama js kütüphanesinde haritanın karolarını klonlayamayacağını tahmin ettim.

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

Harita kiremitlerini klonlamak için bir yol olacak mı yoksa yanlış mıyım? Eğer öyleyse bunu nasıl başarabilirim? ...

cevap

0

Karo elemanlarına erişebildiğiniz sürece bunları klonlayabilirsiniz, ancak (arabirimin artık aynı olduğu varsayılarak), OpenStreetMap'de kesinlikle img etiketinin yer aldığı görünmektedir. div s çöktü, bu nedenle ya img öğelerini kendileri klonlamaya ihtiyaç duyarsınız (ve bunun yerine, kitaplık ile çalıştığı varsayılarak farklı konumlandırma ile kullanın) ya da bir div oluşturun, URL'yi görüntüden dışarı çekin ve uygulayın. sizin için bir arka plan olarak div. fayans mantıksal numaralandırılmıştır gibi Bölgeyi biliyorsanız, sadece o adımı, böyle belki bir şey atlamak istiyorum:

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

kendisi muhtemelen bu özel kütüphaneye yaramak yok OpenStreetMap yerli biçimi (özellikle de kesinlikle yerleştirilmiş görüntüleri ile), bu yüzden daha fazla position: static yapısını, mutlak konumlardan kaçınarak ve katlanabilecek satırlara bölerek düzenini taklit etmeniz gerektiğini düşünüyorum.