Mapbox-gl высота 100%
Mapbox не подходит к своему контейнеру. почему бы и нет?
Это визуализированный html:
<div class = "map mapboxgl-map" id = "mapBox">
<div class = "mapboxgl-canvas-container">
<canvas class = "mapboxgl-canvas" style = "position: absolute; width: 1920px; height: 277px;" tabindex = "0" aria-label = "Map" width = "1920" height = "277">
</canvas>
</div>
</div>
те 277px, я думаю, по умолчанию.
это js:
mapboxgl.accessToken = 'blabla';
var map = new mapboxgl.Map({
container: 'mapBox',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-77.04, 38.907],
zoom: 11.15
});
это ссс:
.map {
grid-column: 1/-1;
height: 100%;
position: relative;
canvas, .mapboxgl-canvas {
height: 100%;
}
}
Если я добавлю очень известный !important к height: 100%;, то он работает, но карта растягивается.
Как мне это сделать?
Вам никогда не нужно стилизовать холст напрямую. Какая у тебя проблема на самом деле?
холст не отзывчивый, он не соответствует высоте контейнера. Есть эти встроенные 227px, откуда я не знаю, и в документации mapbox я ничего не могу найти об ответах.
Ответы 6
Я нашел подвох.
просто добавь
map.on('load', function () {
map.resize();
});
в js, поэтому размер карты изменится в соответствии с контейнером
это круто❤
вместо map.on('load', function(){}) вы можете использовать map.on('render', function(){}) это заставит размер принимать полный размер контейнера перед загрузкой карты, потому что карта может загружаться в маленьком размере, а затем он изменяется до полного размера, что создает плохой опыт пользовательского интерфейса. Во время рендеринга он изменяет размер перед загрузкой.
добавьте это в свой css
.mapboxgl-map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
а также
{ position: relative } в родительский div
это игнорируется скриптом mapbox
.....это сработало. Также исправлена моя проблема с прокруткой карты колесом прокрутки вместо увеличения и уменьшения масштаба. Лучший ответ. Хотя у меня не было родительской позиции: относительной, поскольку она у меня уже была абсолютной.
После нескольких часов попыток найти решение и попробовать решения здесь, на SO, я наконец понял, как заставить Mapbox соответствовать своему контейнеру. Чтобы mapbox соответствовал своему контейнеру без необходимости устанавливать абсолютную высоту, он должен быть непосредственным первым дочерним элементом родительского div. Mapbox не может быть вторым, третьим или четвертым дочерним элементом и т. д. Почему? Я предполагаю, что mapbox-gl.css вступает в конфликт с пользовательскими правилами CSS.
Это работает каждый раз:
<section class = "map_box_container">
<!--MAP-->
<div id='map'></div>
</section>
Это никогда не работает:
<section class = "map_box_container">
<div class = "second_child">
<!--MAP-->
<div id='map'></div>
</div>
</section>
CSS
.map_box_container{
position: relative;
height: 100% !important;
width: 100% !important;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Обновление 2021
I'm using mapbox in a new project and it is my understanding that mapbox does not require its parent container to have any css to work.HTML
<section class = "map_box_container">
<!--MAP-->
<div id='map'></div>
</section>
CSS
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Лучший ответ!
Обратите внимание, что если вы хотите, чтобы маркеры оставались нетронутыми, вам также нужно установить для них абсолютные значения: .mapboxgl-marker { position: absolute; top: 0; left: 0; }.
Обновление 2021 - правильный ответ имхо. Если родитель карты находится внутри сетки, установите для него относительное положение, а затем примените стили #map с абсолютным позиционированием.
Единственный надежный способ, который я нашел, - это использовать jQuery. В моем случае карта находится на вкладке, которая не активна при загрузке страницы, поэтому я выполняю код при переключении на вкладку, содержащую карту.
var $ = window["$"];
$('.mapboxgl-canvas').css('width', '100%');
$('.mapboxgl-canvas').css('height', '100%');
Обновлено: Это работает, но карта выглядит уродливой и пиксельной. Я, вероятно, вернусь к Google Maps.
Это не отвечает на вопрос. Замечание по поводу Google Maps не актуально.
const [порт просмотра, setViewport] = useState({ ширина: «100%», height: 'calc(100vh - 162px)', // 162px - высота всех элементов в верхней части карты широта: 0, долгота: 0, зум: 12, подшипник: 0, шаг: 0, переходПродолжительность: 2000 г., переходИнтерполятор: новый FlyToInterpolator(), });
Этот работал для меня. Это займет некоторое время, прежде чем он подействует, но оно того стоит.
map.on('load', function() {
$('.mapboxgl-canvas').css('width', '100%');
$('.mapboxgl-canvas').css('height', '100%');
map.resize();
});
Вероятно, потому что холст абсолютно позиционирован. Не уверен, почему это так... это не увеличивает рост родителя таким образом.