要在Blazor中使用Google 地图 JS API,可以按照以下步骤操作:
在Blazor项目的wwwroot目录中创建一个名为"js"的文件夹。
在"js"文件夹中创建一个名为"google-maps.js"的JavaScript文件,并将Google 地图 JS API的代码复制到该文件中。例如,将以下代码复制到"google-maps.js"文件中:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
在Blazor项目的Pages目录中,打开需要使用Google 地图的页面(例如Index.razor)。
在页面中,使用以下代码引用Google 地图的JavaScript文件:
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("loadScript", "/js/google-maps.js");
}
}
}
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("loadScript", "/js/google-maps.js");
await JSRuntime.InvokeVoidAsync("initMap");
}
}
}
这样,就可以在Blazor中使用Google 地图 JS API,并在页面上显示地图了。请确保在使用之前替换Google 地图 JS API的代码中的API密钥和其他必要配置。