如何在Blazor中调用javascript构造函数

Question

我想开发一个Blazor组件来包装Azure Maps javascript。第一步是在页面上显示地图。

通常，对于javascript，它是这样做的：

let map = new atlas.Map('mapContainer', {
view: 'Auto',
maxZoom:22,
zoom:4,
center: [2.35405, 43.855103],
style:'road',
showLogo:false,
showFeedbackLink:false,                        
authOptions: {
authType:atlas.AuthenticationType.subscriptionKey,
subscriptionKey: <subscriptionKey>
}
});

有了Blazor，JS就不能直接用这种方式处理了。因此，我必须使用JSRuntime来编写以下代码：

mapsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js");

// The following is using custom c# code
MapAuthOptions authOptions = new MapAuthOptions();
authOptions.subscriptionKey = this.subscriptionKey;
authOptions.authType = AuthenticationType.subscriptionKey;

MapOptions options = new MapOptions();
options.authOptions = authOptions;
options.showFeedbackLink = false;
options.showLogo = false;
options.maxZoom = 22;
options.zoom = 4;
options.view = "Auto";
options.style = "road";

// this line crash
await mapsModule.InvokeAsync<object>("atlas.Map", "mapContainer", options);

我想知道如何调用经典的JS构造函数。更准确地说，如何调用新图集。是否使用InvokeAsync和Blazor映射((？

Answer 1

我已经开发这样的解决方案几个月了。您可以在这里查看实现并使用这个Nuget包。

我创建一个新的map实例的决定基本上是公开一个静态方法来创建map。打字稿里有这样的东西：

public static addMap(mapId: string,
configuration: Configuration,
serviceOptions: azmaps.ServiceOptions,
enabledEvents: string[],
eventHelper: EventHelper<MapEventArgs>): void {
...
const map = new azmaps.Map(mapId, serviceOptions);
...

基本上，我将对atlas库的调用封装到静态方法中。

之后，使用IJsRuntime:实例可以很容易地调用脚本

await JSRuntime.InvokeVoidAsync(Constants.JsConstants.Methods.Core.AddMap.ToCoreNamespace(),
Id,
Configuration.Value,
ServiceOptions,
enabledEvents,
DotNetObjectReference.Create(_mapEventInvokeHelper));