当我试图在混合blazor应用程序中通过interop调用名为initMap的js函数时，我不断收到以下错误：
在"window"中找不到"initMap">
我有以下代码：
测试应用程序。Windows\wwwroot\index.html
...
<head>
<script src="../js/initGoogleMap.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</head>
...
测试应用程序。Windows\wwwroot\js\initGoogleMap.js
window.initGoogleMap = {
initMap: function () {
const latLng = new google.maps.LatLng(40.716948, -74.003563);
const options = {
zoom: 14,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
const map = new google.maps.Map(document.getElementById("map"), options)
}
};
TestApp\WebUI\Pages\Index.razor
@page "/"
@inject IJSRuntime JSRuntime
<h1>Hello, world!</h1>
Welcome to your new app.
<div id="map" style="height:500px; width:100%;"></div>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender)
{
Console.WriteLine("first render");
await JSRuntime.InvokeVoidAsync("initMap");
}
}
}
知道为什么会出现这种错误吗？我试了几个小调整，但都没有用。如有任何帮助，我们将不胜感激！
尝试await JSRuntime.InvokeVoidAsync("initGoogleMap.initMap");
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0#捕获元素的参考
很可能静态文件没有复制到工作目录中。以下是处理该问题的一些步骤：
-
在公共项目中，确保所有静态资源都设置为"如果更新则复制"；(在文件属性中(
-
在index.html文件中，请设置文件路径以匹配以下模式：
"_content/<PROJECT_NAME>/path/to/the/file.js"
在您的情况下，这将是：
"_content/TestApp/js/initGoogleMap.js"
- 删除每个项目中的所有bin和obj文件夹并重建整个解决方案
- 如果Android的问题仍然存在，请从Android模拟器中卸载该应用程序，然后重复步骤3
p。S.以下是Blazor Binding回购中问题的链接：https://github.com/dotnet/MobileBlazorBindings/issues/211