4

2 つの div を含むサイトを作成しようとしています:

  • 左、コンテンツとともに Y スクロール可能
  • 右、移動せず（位置固定）、ラベルとリーフレット マップのみを含む

ページをスクロールすると、リーフレットに灰色の跡が残ります。これを取り除きたいです。

ここで（stackoverflowで）見つけたのはmap.invalidateSize()だけですが、役に立ちませんでした。

jsfiddle の完全な例をここでご覧ください。

HTML:

<div id="map">      
</div>

<div id="content">
Heres the text<br />
    ...
</div>

CSS:

html, body, #map {
    width: 100%;
    height: 100%;
}
#map{
    width: 400px; 
    height: 400px; 

    position: fixed; 
    left: 60%; 
    top: 30%;   
}

JS:

    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('map').setView([51.505, -0.09], 13);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    window.map = map;

$(document).ready(function(){
    $(window).scroll(function(){
        window.map.invalidateSize();
    })
})
4

1 に答える 1

3

に変更しますbackground: none;

#map{
    width: 400px; 
    height: 400px; 
    background: none;
    position: fixed; 
    left: 60%; 
    top: 30%;   
}
于 2013-09-25T09:47:15.937 に答える