Tờ rơi đồ bốc gạch nửa màu xám

Question

Tôi có một bản đồ tờ rơi trong một div mà tôi Loa như thế này:

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script> 

    <!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" /> 
    <!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" /> 
    <![endif]--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

sau đó tôi có một div như thế này:

Một số js mà tải Bản đồ:

map = L.map($attrs.id, 
         center: [40.094882122321145, -3.8232421874999996] 
         zoom: 5 
    ) 
     L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png", 
        maxZoom: 18 
    ).addTo map 

Sau đó, trên tải trang tôi có một số JS theo dõi chiều cao cửa sổ và thay đổi kích thước:

012.351.

$("#map").height($(window).height()) 
$(window).resize(_.throttle(-> 
    $("#map").height($(window).height()) 
, 100 
)) 

Tuy nhiên, khi bản đồ tải nó tải bằng một nửa số ô có màu xám. Khi tôi thay đổi kích thước tải bản đồ tốt nhưng tải ban đầu là 1/2 xám

Answer 1

Nếu bạn không có một lý do để sử dụng JS cho bản đồ kích thước của nó CSS ​​có lẽ tốt hơn để sử dụng:

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

Tuy nhiên bạn có thể thử sử dụng map.invalidateSize() sau khi chèn bản đồ vào DOM (hoặc bản đồ được thay đổi kích thước bởi $("#map").height($(window).height())).

invalidateSize() được gọi theo mặc định khi bạn đổi kích thước cửa sổ, xem các liên kết sau: https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 và https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.