mapbox - 如何在 Blazor 下运行 MapBox?
问题描述
我尝试使用下一个库在 Blazor 下运行 MapBox
https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js
当我删除该行时(来自默认应用程序)
<script src="_framework/blazor.server.js"></script>
MapBox 库工作,除了事件。当我恢复那条线时,事件会起作用,但地图会消失
如何解决问题?
_host.cshtml:
@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>
index.razor:
@page "/"
<div id='map'></div>
这样做了:
@page "/"
@inject IJSRuntime JSRuntime;
<div id='map'></div>
@code {
protected override void OnAfterRender(bool firstRender)
{
JSRuntime.InvokeVoidAsync("mapBoxFunctions.initMapBox");
}
}
PS 我注意到尽管该站点似乎运行良好,但在控制台中您可以在启动时看到一个错误
不能有人说如何解决这个问题。
发布应用程序后 - 浏览器中看不到错误
解决方案
推荐阅读
- python - Typeerror:CNN 中不可散列的类型列表
- javascript - 无法理解使用 Promise Express 加载 json
- node.js - 如何使用 nodejs 设置 Authorization Bearer 标头
- javascript - 我创建了标签,但它没有显示在网页上
- autotools - 如何在 autotools 项目中添加/使用 --with-package arg?
- java - 如何在 Java 中设计抽象数据类型(ADT)?
- java - 我们可以将重写的方法作为Java中的抽象方法吗?
- javascript - 如何使用 array.push() 方法,以便将数据从一个组件推送到单独文件中的数组中?
- kubernetes - Kubernetes服务没有外部IP,无法访问服务
- javascript - 如何在 Python 中接收 JavaScript 变量(二维数组)