javascript - 传单奇怪的 map 大小和平铺行为

Question

我正在将传单 map 集成到我用 meteor 和 meteor 的模板引擎构建的网站中。

关于 map 大小以及拖动和缩放时的外观，我遇到了非常奇怪的问题。

我这样初始化 map :

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 大小不同的图 block 。

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

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

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

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

Answer 1

对于 Meteor，您还需要捆绑 Leaflet CSS 文件。

例如如果您使用样式编译器包，只需在您的样式文件之一中@import Leaflet CSS 文件(确切路径可能类似于../node_modules/leaflet/dist/leaflet. css 取决于放置样式文件的位置，或者您可以使用 {}/node_modules 引用，具体取决于您的编译器包功能)。

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

一种变体是创建一个符号链接(symbolic link)。

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

您可以简单地将 images 文件夹(及其内容)复制到您的 public 中，以便获得以下结构:

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

等等