Почему мой компонент имеет высоту 0?
Я использую компонент AzureMapControl<AzureMap> в серверном веб-приложении Blazor. Если он является единственным содержимым моей страницы Index.razor, он отображается нормально. (Это было в небольшом примере приложения, которое я написал).
Но когда я перемещаю его в свое приложение, в котором хочу его использовать, в MainLayout.razor которого много чего, его высота равна 0. Наконец я попытался принудительно установить высоту, выполнив следующие действия:
<div style = "width: 600px; height: 600px;">
<AzureMap Id = "map"
CameraOptions = "new CameraOptions { Zoom = 12 }"
Controls = "new Control[]
{
new ZoomControl(new ZoomControlOptions { Style = ControlStyle.Auto }, ControlPosition.TopLeft),
new CompassControl(new CompassControlOptions { Style = ControlStyle.Auto }, ControlPosition.BottomLeft),
new StyleControl(new StyleControlOptions { Style = ControlStyle.Auto, MapStyles = MapStyle.All() }, ControlPosition.BottomRight)
}"
StyleOptions = "new StyleOptions { ShowLogo = false }"
EventActivationFlags = "MapEventActivationFlags.None().Enable(MapEventType.Ready)"
OnReady = "OnMapReadyAsync" />
</div>
Но это все еще высота 0:
Что может быть причиной этого и как мне добиться высоты?
Ответы 2
Я видел, как это происходило со многими динамическими элементами управления, такими как карты. Основная причина заключается в том, что div, в котором содержится карта, имеет нулевую высоту при загрузке карты, и поэтому это происходит. Обычный сценарий, в котором я видел это, — это вкладки, где вкладка с картой изначально скрыта (нулевой размер). Элементы DOM не имеют события изменения размера, поэтому для отслеживания изменений одного элемента требуется дополнительный код и дополнительные ресурсы. Единственное событие изменения размера, изначально присутствующее в браузерах, — это изменение размера всей страницы, что происходит на мобильных устройствах только при повороте устройства. Обычно вам придется вручную вызвать метод «resize» на карте, чтобы заставить ее перерисоваться. Вот несколько способов решить эту проблему:
- Убедитесь, что вы используете последнюю версию Azure Maps. Похоже, вы используете старую версию, основанную на имени CSS-класса «mapbox» (много лет назад Azure Maps перешла на «maplibre»).
- Если у вас есть вкладка, например «Впечатление», или опыт, в котором карта находится в скрытом элементе div, а затем отображается, вызовите событие «изменение размера» карт, когда делаете элемент управления видимым.
- Если элемент div карты виден при загрузке карты, убедитесь, что карта имеет некоторую высоту. Использование процентов или вычислений CSS — оба хорошие варианты. Если вы используете проценты, убедитесь, что высота тела вашего HTML равна 100 %, иначе ваша страница не заполнит экран.
Я был первоначальным архитектором веб-SDK Azure Maps и принимал активное участие в создании платформы MapLibre и переходе на нее Azure Maps. The Blazor AzureMapsComponet здесь: github.com/arnaudleclerc/AzureMapsControl.Components на самом деле говорит, что нужно указать на версию 3 Azure Maps (последнюю версию). Azure Maps перешел на MapLibre с версией 2. Тем не менее, этот компонент не создается и не управляется Microsoft, поэтому у меня нет всех подробностей о нем.
Еще раз огромное спасибо. А система Azure Map, поставляемая Microsoft, на мой взгляд, действительно хорошо спроектирована. Так что спасибо за то, что вы создали.
Хорошо, это действительно ужасный хак. (И мне придется выяснить, какие значения установить в зависимости от размера окна браузера.) Но это работает.
Добавьте следующий стиль:
<style>
#map {
width: 600px;
height: 600px;
}
</style>
<AzureMap Id = "map"
CameraOptions = "new CameraOptions { Zoom = 12 }"
Controls = "new Control[]
{
new ZoomControl(new ZoomControlOptions { Style = ControlStyle.Auto }, ControlPosition.TopLeft),
new CompassControl(new CompassControlOptions { Style = ControlStyle.Auto }, ControlPosition.BottomLeft),
new StyleControl(new StyleControlOptions { Style = ControlStyle.Auto, MapStyles = MapStyle.All() }, ControlPosition.BottomRight)
}"
StyleOptions='new StyleOptions { ShowLogo = false, Language = "en-US" }'
EventActivationFlags = "MapEventActivationFlags
.None()
.Enable(MapEventType.Ready, MapEventType.Click, MapEventType.DragEnd, MapEventType.SourceAdded)"
OnReady = "OnMapReadyAsync"
OnDragEnd = "OnMapDragEnd"
OnSourceAdded = "OnDatasourceAdded" />
Я предполагаю, что вы не использовали AzureMapControl. И это использование «mapbox» связано с этим. Это означает, что компонент устарел, верно? Будет ли мне лучше, если я буду использовать элемент управления Azure Map, создавая на его основе собственный компонент Blazor? ТИА.