传单怪异的地图大小调整和平铺行为

Question

我正在将传单地图集成到由流星建造的网站中，流星的模板引擎火爆。

关于地图大小以及拖动和缩放时的外观，我正在经历一种非常奇怪的行为。

我这样初始化地图：

var mymap = L.map('leaflet-map').setView([40.712, -74.227], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 15,
  minZoom: 1,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap);

HTML：

<div id="map-div">
    <div id="map-inner-div">
        <div id="leaflet-map"></div>
    </div>
</div>

CSS：

#map-div {
  height:300px;
  width:500px;
}

加载网页时，我得到一个单独的图块，它的大小不是其父div的大小。

如果我拖动图块或缩放，它将遍及整个地方，并随机出现其他图块。

我没有收到任何错误消息。

我的假设是，地图的宽度和高度默认为全屏显示，但是它只是偶尔加载各种图块。

如果有人甚至对搜索字词有任何建议，可能会带我走上正确的道路，这将不胜感激，因为我什至不确定如何描述自己所看到的内容。

Answer 1

使用Meteor，您还需要捆绑Leaflet CSS文件。

例如如果您使用的是样式编译器软件包，只需@import一个样式文件中的Leaflet CSS文件（确切的路径可能像../node_modules/leaflet/dist/leaflet.css，这取决于样式文件的放置位置，或者能够使用{}/node_modules引用取决于您的编译器软件包功能）。

另一种可能的解决方案是将Leaflet CSS文件简单复制到您的client文件夹中，以便自动将其捆绑/加载。

一种替代方法是创建符号链接。

最后，如果您使用默认的“标记”图标（蓝色图钉）和/或默认的“图层控制”（带有堆叠的菱形图标），请不要忘记将传单图像（在dist/images文件夹中）添加到{ {1}}文件夹，以便Leaflet JS可以找到它们。再次，将符号链接该文件夹。

您可以简单地将public文件夹（及其内容）复制到images中，以便获得以下结构：

public

等