如何在 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 调用 new atlas.Map() ?

Answer 1

几个月来我一直在开发这样的解决方案。你可以看看实现 here and use this Nuget package.

我决定创建一个新的地图实例基本上是公开一个静态方法来创建地图。打字稿中的类似内容：

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));

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

How to invoke a javascript constructor in Blazor?

blazor

azure-maps