Leaflet.js奇怪的边界

Question

我试图在我的网站上使用Leaflet.js库，但是当我从Leaflet的快速入门中复制代码时，我得到的是这样的内容：

我的代码是：

var myMap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    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>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoib3N0cnl1c2VyIiwiYSI6ImNqdWt6bjZwMTBlNXo0MW9tYXo5cm1vYzgifQ.gI8BNI3q8ZPu55QgCkVzOQ'
}).addTo(myMap);

我还在CSS中增加了一个高度。 如何删除边框并获得干净的地图？

Answer 1

欢迎您！

似乎您尝试使用过于通用的CSS选择器来样式化地图容器，例如：

div {
  width: 80%;
  height: 35%;
  border: 1px solid black;
}

因此，它会干扰Leaflet的内部元素：拐角<div>和控件（缩放和归因）会继承这些规则。它们的大小变形了，并且得到了额外的边框。

简单的解决方案只是使CSS选择器更具体，通常是#mapContainerId而不是div。