javascript - 来自 geoJSON 的传单 map 超出了 div 范围

Question

尝试了解有关 LeafLet 的更多信息。由于它不涉及tiles和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”时，我发现 map 实际上延伸到了 div 容器的边界 ( https://jsfiddle.net/ef6otu1w/1/ )。

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

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

Answer 1

您只是缺少 Leaflet CSS 文件。

添加到 HTML 文件的头部:

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

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