15

次のように loa する div にリーフレット マップがあります。

  <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" />

次に、次のような div があります。

マップをロードするいくつかの js:

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

次に、ページの読み込み時に、ウィンドウの高さとサイズ変更を監視する JS がいくつかあります。

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

ただし、マップをロードすると、半分のタイルが灰色でロードされます。マップのサイズを変更すると正常にロードされますが、初期ロードは 1/2 グレーです

4

2 に答える 2

20

マップのサイズ設定に JS を使用する理由がない場合は、おそらく CSS を使用することをお勧めします。

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

map.invalidateSize()ただし、マップを DOM に挿入した後 (または によってサイズ変更されたマップ)を使用してみることができます$("#map").height($(window).height())。

invalidateSize()ウィンドウのサイズを変更すると、デフォルトで呼び出されます。次のリンクを参照してください: https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609およびhttps://github.com/Leaflet /Leaflet/blob/master/src/map/Map.js#L616 .

于 2013-02-26T15:01:02.933 に答える