来自 geoJSON 的传单地图超出了 div答案

【问题标题】：Leaflet map from geoJSON goes outside div来自 geoJSON 的传单地图超出了 div
【发布时间】：2017-07-20 10:20:04
【问题描述】：

尝试了解有关 LeafLet 的更多信息。由于它不涉及瓷砖和 CSS，我认为它与另一个类似的短语问题不同。对这个很新，所以我可以离开。

正在按照基本说明进行操作：

var myCustomStyle = {
  stroke: false,
  fill: true,
  fillColor: '#fff',
  fillOpacity: 1
}

$.getJSON(myGeoJSONPath, function(data) {
  var map = L.map('map', {
    zoomControl: false,
    attributionControl: false
  }).setView([39.74739, -10], 2);

  L.geoJson(data, {
    clickable: false,
    style: myCustomStyle,
  }).addTo(map);

})

当它被绘制在容器中时，一切看起来都很好。但是，当我将 stroke 更改为 'true' 时，我发现地图实际上超出了 div 容器的边界 (https://jsfiddle.net/ef6otu1w/1/)。

我尝试检查 map.getSize()，它正确显示了容器的宽度和高度。同样，将 .getBound() 转换为点之类的方法仅确认 latlng 与容器尺寸相对应。即使我使 div 比地图大，当我将地图拖过容器边缘时，它也会显示在空白处。

我想知道这可能是什么原因，以及如何将地图保存在容器中。

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

您只是缺少 Leaflet CSS 文件。

添加到 HTML 文件的头部：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />

https://jsfiddle.net/ef6otu1w/2/

【讨论】：