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

Question

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

以下是点击按钮时触发的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();
        });
    }); 
});

<强> PS

• 更好地使用jquery val方法输入，data方法替代attr。
• 您已将#hide元素设为this。
• 如果你不混合不同的qoutes，那么代码看起来会更好。