Konnte die Bildkacheln der Karte mit dem Jquery-Klon

Question

nicht klonen. Arbeiten an den Open Street-Karten und paperfold css animation.

Ich habe eine Karte in den

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

platziert Aber es könnte die vollständige Karte nicht angezeigt werden soll. Ich kenne den genauen Grund nicht, aber ich vermutete, dass in js Bibliothek, die die Kacheln der Karte nicht klonen konnte.

So wird es eine Möglichkeit geben, die Kacheln der Karte zu klonen, oder gehe ich falsch. Wenn ja, wie könnte ich dies erreichen ...

Answer 1

Solange Sie die Kachelelemente zugreifen können Sie sie klonen, aber (vorausgesetzt, die Schnittstelle ist jetzt das gleiche) sie scheinen absolut platziert werden img Tags in OpenStreetMap - die div s sind zusammengebrochen, also müssten Sie entweder die img Elemente selbst klonen (und verwenden Sie diese stattdessen mit unterschiedlicher Positionierung, vorausgesetzt, es funktioniert mit der Bibliothek), oder erstellen Sie eine div, ziehen Sie die URL aus dem Bild und wenden Sie es an als Hintergrund für Sie div. Da die Fliesen logisch nummeriert sind, wenn Sie den Bereich wissen wollen Sie könnten Sie einfach diesen Schritt überspringen, vielleicht so etwas wie folgt aus:

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

Das native Format von OpenStreetMap selbst wahrscheinlich nicht selbst auf diese spezielle Bibliothek eignet (besonders mit seinen absolut positionierten Bildern), so denke ich, dass Sie sein Layout mit einer mehr position: static Struktur nachahmen müssen, die absoluten Positionen vermeidend und es in enthaltene Reihen aufteilt, die gefaltet werden können.