来自geoJSON的传单地图不在div之外

Question

尝试了解有关LeafLet的更多信息。 由于它不涉及tile和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);

})

当将其放在容器中时，一切看起来都还不错。 但是，当我将笔触更改为“ true”时，我发现地图实际上超出了div容器（ https://jsfiddle.net/ef6otu1w/1/ ）的边界。

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

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

Answer 1

您只是缺少Leaflet CSS文件。

添加到HTML文件的头部：

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

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