如何在Blazor下运行MapBox？_Mapbox_Blazor

如何在Blazor下运行MapBox？

mapbox blazor

如何在Blazor下运行MapBox？,mapbox,blazor,Mapbox,Blazor,我尝试在Blazor下运行MapBox，使用下一个库 https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js 当我删除行时（从默认应用程序） @注入IJSRuntime JSRuntime @代码{ 受保护的覆盖无效OnAfterRender（布尔firstRender） { JSRuntime.InvokeVoidAsync（“mapBoxFunctions.initMapBox”）； } } 另外，我注意到，尽管该站点似乎

我尝试在Blazor下运行MapBox，使用下一个库

https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js

当我删除行时（从默认应用程序）

@注入IJSRuntime JSRuntime

@代码{ 受保护的覆盖无效OnAfterRender（布尔firstRender） { JSRuntime.InvokeVoidAsync（“mapBoxFunctions.initMapBox”）； } }

另外，我注意到，尽管该站点似乎运行良好，但在控制台中，您可以在启动时看到错误谁也说不出如何解决这个问题。

发布应用程序后-在浏览器中看不到任何错误

当您删除该行时，Blazor将不再工作…您是否正确添加地图？那代码是什么样子的？

<script src="_framework/blazor.server.js"></script>

@page "/"
@namespace BlazorApp3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp3</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />


    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />


    <style>

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 85%;
            height: 100%;
        }
    </style>

</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoidGVyZW50ZXYiLCJhIjoiY2sycDN1Z21zMDBheTNrbzZ2aG42aWUyMiJ9._2hucdk7L6jhzEHE6LGv9A';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
            center: [34.047, 63.779],
            zoom: 4.41
        });
    </script>
    <script src="_framework/blazor.server.js"></script>


</body>
</html>

@page "/"
<div id='map'></div>

@page "/"