來自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/