使用JSInterop将对象传递给JavaScript会导致空对象

在ASP.NETCore中，我试图从C#代码为Google地图构建基本绑定。使用JSInterop，我可以成功地将字符串传递给JavaScript函数，但当我尝试传递更复杂的对象时，该对象在JavaScript函数中显示为空

我部分遵循并修改了它，使用谷歌地图而不是必应地图

正如在教程中一样，我发现Google Maps可以帮助编写绑定代码

我有以下razor文件，当用户单击按钮时，该文件应加载地图：

@page "/sitemapper"
@inherits SiteMapperBase

<h3>Map</h3>

<div id="map" style="position: relative; width: 100%; height: 70vh;"></div>

<button class="btn btn-primary" @onclick="@OpenMap">Click me</button>

@code {
void OpenMap()
{
    LoadMap();
}
}

上述代码中的C类定义如下：

public class MapOptions
    {
        public string elementId;
        public LatLng center;
        public int zoom;

        public MapOptions(string elementId, LatLng center, int zoom)
        {
            this.elementId = elementId;
            this.center = center;
            this.zoom = zoom;
        }
    }

    public class LatLng
    {
        public double lat;
        public double lng;

        public LatLng(double latitude, double longitude)
        {
            lat = latitude;
            lng = longitude;
        }
    }

在JavaScript/TypeScript方面，我定义了以下与C#类匹配的接口：

最后，我有一个GoogleTsInterop.ts文件，其中包含我的TypeScript代码：

/// <reference path="types/index.d.ts" />
/// <reference path="interfaces/GoogleMapsInterfaces.ts" />

let googleMap: GoogleMap;

class GoogleMap {
    map: google.maps.Map;

    constructor(options: GoogleMapOptionsInterface) {
        console.log("constructor");
        var mapElement = document.getElementById(options.elementId);
        this.map = new google.maps.Map(mapElement, {
            center: options.center,
            zoom: options.zoom
        });
    }
}

function loadMap(options: GoogleMapOptionsInterface) {
    new GoogleMap(options);
}

//
/// 
让谷歌地图：谷歌地图；
类谷歌地图{
地图：google.maps.map；
构造函数（选项：GoogleMapOptions接口）{
console.log（“构造函数”）；
var mapElement=document.getElementById（options.elementId）；
this.map=新的google.maps.map（mapElement{
中心：选项。中心，
缩放：选项。缩放
});
}
}
函数加载图（选项：谷歌地图选项界面）{
新谷歌地图（选项）；
}

当我尝试运行此操作时，映射不会加载，在浏览器调试器中查看会发现

loadMap（…）

函数中的

options

对象是一个空对象（请参阅）（抱歉，我没有足够的信誉来直接放入图像）

如果我更改代码，我可以成功地传递一个带有以下内容的字符串：

await JSRuntime.InvokeAsync（“loadMap”，“test”）。但是我想传递对象

有办法做到这一点吗？我做错了什么？谢谢
能否将其作为JsonResult或JSON字符串传递

MapOptions options = new MapOptions("map", center, 8);
JSRuntime.InvokeAsync<Task>("loadMap", Json(options));

MapOptions=newmapoptions（“地图”，中心，8）；
InvokeAsync（“loadMap”，Json（选项））；

或

MapOptions=newmapoptions（“地图”，中心，8）；
var result=new JavaScriptSerializer（）.Serialize（选项）；
JSRuntime.InvokeAsync（“loadMap”，result）；
Json（…）方法来自哪里？NewtonsoftJson或任何其他将对象转换为Json格式的库
/// <reference path="types/index.d.ts" />
/// <reference path="interfaces/GoogleMapsInterfaces.ts" />

let googleMap: GoogleMap;

class GoogleMap {
    map: google.maps.Map;

    constructor(options: GoogleMapOptionsInterface) {
        console.log("constructor");
        var mapElement = document.getElementById(options.elementId);
        this.map = new google.maps.Map(mapElement, {
            center: options.center,
            zoom: options.zoom
        });
    }
}

function loadMap(options: GoogleMapOptionsInterface) {
    new GoogleMap(options);
}

MapOptions options = new MapOptions("map", center, 8);
JSRuntime.InvokeAsync<Task>("loadMap", Json(options));

MapOptions options = new MapOptions("map", center, 8);
var result = new JavaScriptSerializer().Serialize(options);
JSRuntime.InvokeAsync<Task>("loadMap", result);