9

处理开放街道地图和折纸 CSS 动画。

我已经在

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

那么有没有办法克隆地图的瓷砖或者我错了。如果是这样，我怎么能做到这一点......

4

1 回答 1

0

只要您可以访问 tile 元素，您就可以克隆它们，但是（假设界面现在相同）它们似乎是绝对放置img在 OpenStreetMap 中的标签 - divs 已折叠，因此您需要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-06T12:13:43.827 回答