javascript - Openstreet 地图在增加长度时显示空白部分

Question

我在我的网页上显示原始尺寸为 970/256（宽度/高度）的 openstreet 地图。它工作正常。我还在页面上添加了一个按钮。当用户按下此按钮时，地图宽度会增加，跨越页面的总宽度。但是当地图宽度增加时，地图的右侧部分似乎是空白的，如下图所示：

这是单击按钮时要触发的 Javascript 代码：

$(function() {
            $("#hide").click(function() {
                if($(this).attr("value") == "Hide")
                {
                    document.getElementById('hide').value="Show";
                    $("#hide").html('Show');
                    $('#tabs').hide();

                    var pos;
                    pos = $("#map").offset();
                    $("#map").animate({
                        left: "-" + (pos.left-50) + "px",
                    });

                    $("#map").width(1350);
                }   
                else{
                    document.getElementById('hide').value="Hide";
                    $("#hide").html('Hide');
                    $('#tabs').show('fast');

                    var pos;
                    pos = $("#map").offset();
                    $("#map").animate({
                        left: "+" + (pos.left+50) + "px",
                    });

                    $("#map").width(970);
                }   

            });
        });

有什么建议么？

Answer 1

map.invalidateSize();换大小后试试。

$(function() {
    $('#hide').click(function() {
        var button = $(this), mapStyles;

        if(button.attr('value') === 'Hide') {
            button.attr('value', 'Show');
            button.html('Show');
            $('#tabs').hide();

            pos = $('#map').offset();
            mapStyles = {
                left: '-' + (pos.left - 50) + 'px',
                width: '1350px'
            };
        } else {
            button.attr('value', 'Hide');
            button.html('Hide');
            $('#tabs').show('fast');  

            pos = $('#map').offset();
            mapStyles = {
                left: '+' + (pos.left + 50) + 'px',
                width: '970px'
            };
        }   

        $('#map').animate(mapStyles, function () {
            // there are you must have map varable witch retirned by L.Map()
            map.invalidateSize();
        });
    }); 
});

附言

• 更好地使用 jqueryval方法作为输入和data其他方法attr。
• 您已经将#hide元素作为this.
• 如果您不混合使用不同的 qoutes，那么代码看起来会更好。