我正在尝试启动并运行地图 API，并努力使 Blazor 与 Js 函数配合使用。有没有人有 Bing 或 Google 地图在 Blazor 中工作的例子，我可以看看？
我已经尝试使用 Microsoft 的 Blazor JSInterop 文档中描述的方法引用存储在 wwwroot.index.html 文件中的脚本，但大多都失败了。
索引.html：
<body>
<app>Loading...</app>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
return "";
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=###&callback=loadMapScenario' async defer></script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
blazor 页面：
@page "/"
@inject IJSRuntime JSRuntime
<h1>Hello, world!</h1>
Welcome to your new app.
<div id='myMap' style='width: 400px; height: 300px;'></div>
@functions {
protected override async Task OnInitAsync()
{
var text = await JSRuntime.InvokeAsync<string>("loadMapScenario");
}
}
页面加载，但地图不加载。
您正在 OnInitAsync 方法中调用地图脚本，但此时页面尚未呈现。页面呈现后，尝试在 OnAfterRenderAsync 方法中调用它。
protected override async Task OnAfterRenderAsync()
{
var text = await JSRuntime.InvokeAsync<string>("loadMapScenario");
}
还重新排序你的 javascript 包含
<script src="_framework/blazor.webassembly.js"></script>
<script type='text/javascript'>
function loadMapScenario() {
debugger;
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
return "";
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=###&callback=loadMapScenario' async defer></script>
| 归档时间： |
|
| 查看次数： |
2422 次 |
| 最近记录： |