15

我在 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 回答
1

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

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

在我的情况下，问题是“位置：相对”，所以我添加了一行

<pre>
//Fix personnal bug leaflet
.leaflet-pane{
    img{
        position: absolute;
    }
}
</pre>
于 2018-05-18T13:17:04.747 回答