0

元の寸法が 970/256 (幅/高さ) の openstreet マップを Web ページに表示しています。それは正常に動作します。また、ページにボタンを追加しました。ユーザーがこのボタンを押すと、マップの幅がページの幅全体に広がります。しかし、マップの幅が増えると、次の図に示すように、マップの右側が空白になっているように見えます。

ここに画像の説明を入力

ボタンをクリックしたときにトリガーされる 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);
                }   

            });
        });

助言がありますか？

4

1 に答える 1

2

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

  • 入力およびその他の代わりにjqueryvalメソッドを使用することをお勧めします。dataattr
  • としてすでに#hide要素がありthisます。
  • 異なる qouts を混在させない場合、コードの見栄えが良くなります。
于 2013-05-25T13:18:50.583 に答える