在ASP.NetCore中,我试图用C#代码构建GoogleMaps的基本绑定。使用JSInterop,我可以成功地将字符串传递给JavaScript函数,但当我试图传递更复杂的对象时,该对象在JavaScript函数中显示为空。
我已经部分遵循了this tutorial,并修改了它以使用GoogleMap而不是BingMap。
在教程中,我发现了用于Google Maps的TypeScript definitions来帮助编写绑定代码。
我有下面的razor文件,当用户单击按钮时,它应该加载一个Map:
@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();
}
}
相应的.razor.cs
文件具有以下LoadMap
方法:
protected async Task LoadMap()
{
LatLng center = new LatLng(40.417268, -3.696050);
MapOptions options = new MapOptions("map", center, 8);
await JSRuntime.InvokeAsync<Task>("loadMap", options);
}
上面代码中的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#类匹配:
interface GoogleMapOptionsInterface {
center: GoogleMapLatLngInterface,
zoom: number,
elementId: string
}
interface GoogleMapLatLngInterface {
lat: number,
lng: number
}
最后,我有一个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);
}
当我尝试运行这个函数时,map没有加载,在浏览器调试器中查看,显示loadMap(...)
函数中的options
对象是一个空对象(参见screenshot)(对不起,我没有足够的信誉直接放入图像)。
如果我修改代码,我可以成功地传递一个字符串,如下所示:await JSRuntime.InvokeAsync<Task>("loadMap", "test");
。但是我想传递对象。
有办法做到这一点吗?我做错了什么?谢谢
2条答案
按热度按时间eqqqjvef1#
你能把它作为JsonResult或JSON字符串传递吗?
或
kcrjzv8t2#
这段代码有两个问题。第一步:向经纬度添加getter和setter
第二:typescript函数是一个void,所以需要调用一个void