单张地图加载半灰色的瓷砖(Leaflet map loading half greyed tiles

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

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 /单张/单张/斑点/主/ SRC /图/ Map.js＃L616 。

Answer 2:

在这个问题上经过长时间的搜寻后，在我的情况我有这是一个全球性的CSS样式：

<pre>
img {
    position: relative;
    display: block;
    max-width: 100%;
}
</pre>

在我的情况的问题人的“位置：亲属”，所以我添加一行

<pre>
//Fix personnal bug leaflet
.leaflet-pane{
    img{
        position: absolute;
    }
}
</pre>

文章来源: Leaflet map loading half greyed tiles