单张地图加载半灰色瓷砖

Question

我在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灰色

Answer 1

如果你没有理由使用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.