Leaflet 奇怪的地图大小和平铺行为

Question

我正在将传单地图集成到我用 Meteor 构建的网站中，并且 Meteor 的模板引擎非常出色。

\n\n

我在地图大小以及拖动和缩放时的外观方面遇到了非常奇怪的问题。

\n\n

我像这样初始化地图：

\n\n

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

\n\n

HTML：

\n\n

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

\n\n

CSS：

\n\n

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

\n\n

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

\n\n

\n\n

如果我拖动图块或缩放图块，它会到处都是，其他图块会随机出现。

\n\n

\n\n

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

\n\n

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

\n\n

如果有人对搜索词有任何建议，可能引导我走上正确的道路，我将不胜感激，因为我什至不知道如何描述我所看到的内容。

\n

Answer 1

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

例如，如果您使用的是样式编译器包，只需将@importLeaflet CSS 文件放在您的样式文件之一中（确切的路径可能取决于../node_modules/leaflet/dist/leaflet.css样式文件的放置位置，或者您可以{}/node_modules根据您的编译器包使用参考）特征）。

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

一种变体是创建一个符号链接。

最后，如果您使用默认的标记图标（蓝色图钉）和/或默认的图层控件（带有堆叠的菱形图标），请不要忘记将 Leaflet 图像（在文件夹中）包含dist/images到您的public文件夹中，以便 Leaflet JS 可以找到它们。同样，一种变体是对该文件夹进行符号链接。

您只需将images文件夹（及其内容）复制到您的 中public，即可获得以下结构：

<project-root>/public/images/marker-icon.png

ETC。