Coffeescript 单张地图加载半灰色瓷砖

我在一个分区里有一张传单地图，我喜欢这样：

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

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

然后在页面加载时，我有一些JS监控窗口高度并调整大小：

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

---

但是，当贴图加载时，它会加载一半的灰色瓷砖。当我调整贴图大小时，加载效果很好，但初始加载为1/2灰色

如果您没有理由使用JS调整贴图大小，那么最好使用CSS：

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

但是，您可以在将映射插入DOM后尝试使用

map.invalidateSize（）

（或按

$（“#map”）.height（$（window.height（））

调整映射大小）

调整窗口大小时，默认情况下会调用

invalidateSize（）

，请参见以下链接：

---

而且。

在对这个问题进行了长时间的搜索之后，我有了一个全局css样式，它是：

img{
位置：相对位置；
显示：块；
最大宽度：100%；
}

在我的例子中，问题是“位置：相对”，所以我添加了一行

//修正个人错误传单
.小册子窗格{
img{
位置：绝对位置；
}
}

我有这样一个div:

何处描述？啊！很酷invalidateSiz（）做到了-thanks:）^它还修复了我的地图，同时尝试在我的jQuery移动应用程序中放置

位置：修复了
地图容器-谢谢！这对Firefox很有效。Chrome对此不太满意。我会挖更多的。
<pre>
img {
    position: relative;
    display: block;
    max-width: 100%;
}
</pre>

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