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

Добро пожаловать в SO!

Похоже, вы пытались стилизовать контейнер карты с помощью CSS-селектора, который слишком универсален, например:

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

Поэтому он мешает внутренним элементам Leaflet: corner<div> и элементы управления (масштабирование и атрибуция) наследуют эти правила.Их размер искажен, и они получают эту дополнительную границу.

Самое простое решение - просто сделать ваш CSS-селектор более конкретным, обычно #mapContainerId вместо div.