单张地图加载半灰瓦 [英] 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").height($(window).height())调整大小的地图)后，您可以尝试使用map.invalidateSize().

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屋！