时间戳

首页 > 解决方案 > Blazor - 带有 OSM 的单页

c# - Blazor - 带有 OSM 的单页

问题描述

我正在尝试使用 Blazor 和 OSM 使用BlazorLeaflet NuGet 包创建一个简单的 web 地图。将 100% 覆盖 OSM 地图的单个页面。当宽度和高度值固定为某些值时，一切正常。但是，当我尝试将宽度和高度属性设置为 100% 时，页面完全是空白的。

MainLayout.razor

@inherits LayoutComponentBase
@Body

索引剃刀

@page "/"
@using System.Drawing
@using BlazorLeaflet
@using BlazorLeaflet.Models
@using BlazorWebMap.Data
@inject IJSRuntime jsRuntime

<div id="map">
    <LeafletMap Map="_map" />
</div>

<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }
</style>

@code
{
    private Map _map;

    protected override void OnInitialized()
    {
        _map = new Map(jsRuntime)
        {
            Center = _startAt,
            Zoom = 12.2f
        };

        _map.OnInitialized += () =>
        {
            _map.AddLayer(new TileLayer
            {
                UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                Attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
            });
    };
    }

    private LatLng _startAt = new LatLng(53.13344f, 23.15026f);
}

我知道只使用HTML就可以做到这一点，但我想在 Blazor 中做到这一点，这是我的应用程序的起点。

标签： c#.net-coreleafletblazor

解决方案

position有价值的财产fixed可以帮助您解决问题

html, body, #map {
     height: 100%;
     width: 100%;
     position: fixed;
}

推荐阅读