加载半灰色瓷砖的传单地图 [英] Leaflet map loading half greyed tiles
问题描述
我在一个 div 中有一张传单地图,我喜欢这样:
I have a leaflet map in a div that I loa like this:
<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:
I then have a div such as this:
加载地图的一些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:
Then on page load I have some JS that monitors window height and resizes:
$("#map").height($(window).height())
$(window).resize(_.throttle(->
$("#map").height($(window).height())
, 100
))
但是,当地图加载时,它会加载一半的灰色图块.当我调整地图大小时,加载正常,但初始加载为 1/2 灰色
However when the map loads it loads with half the tiles in grey. When i resize the map loads fine but the initial load is 1/2 grey
推荐答案
如果你没有理由使用 JS 来调整地图大小,那么使用 CSS 可能会更好:
If you don't have a reason to use JS for map sizing its probably better to use CSS:
html, body, #map {
width: 100%;
height: 100%;
}
但是,您可以在将地图插入 DOM 后尝试使用 map.invalidateSize()
(或通过 $("#map").height($(window).height($(window).高度())
).
However you can try using map.invalidateSize()
after inserting the map into the DOM (or map resized by $("#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.
invalidateSize()
is called by default when you resize the window, see the following links:
https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 and https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.
这篇关于加载半灰色瓷砖的传单地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!