MAUI Blazor应用中如何从JS将strCoord传递给OnCenterChanged方法

要实现JS函数将strCoord传递给Blazor组件的OnCenterChanged方法，需要调整组件和JS代码的交互逻辑，具体步骤如下：

步骤1：调整Blazor组件代码 #

• 移除OnCenterChanged方法的static修饰符，JS需要调用组件实例的方法而非静态方法
• 创建组件的DotNet引用并传递给JS函数，同时实现资源释放避免内存泄漏

修改后的GoogleMap.razor代码：

@inject IJSRuntime _JsRuntime
@implements IAsyncDisposable

<div id="map" style="height:500px;width:100%;"></div>

@code {
    private DotNetObjectReference<GoogleMap>? _dotNetComponentRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dotNetComponentRef = DotNetObjectReference.Create(this);
            await _JsRuntime.InvokeVoidAsync("initialize", _dotNetComponentRef);
        }
    }

    [JSInvokable]
    public void OnCenterChanged(string strCoord)
    {
        // 在此处理收到的坐标数据，例如更新组件状态或执行业务逻辑
        Console.WriteLine("收到地图中心坐标：" + strCoord);
    }

    public async ValueTask DisposeAsync()
    {
        _dotNetComponentRef?.Dispose();
        await Task.CompletedTask;
    }
}

步骤2：修改JS函数接收组件引用并调用方法 #

• 让initialize函数接收组件的DotNet引用参数
• 在center_changed事件回调中，通过组件引用调用Blazor的OnCenterChanged方法

修改后的googleMapsInterop.js代码：

function initialize(dotNetRef) {
    var latlng = new google.maps.LatLng(39.925533, 32.866287);
    var options = {
        zoom: 8, center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), options);

    map.addListener("center_changed", function () {
        var center = map.getCenter();
        var latitude = center.lat();
        var longitude = center.lng();
        var strCoord = latitude.toString() + "," + longitude.toString();

        // 调用Blazor组件的OnCenterChanged方法
        dotNetRef.invokeMethodAsync('OnCenterChanged', strCoord)
            .catch(error => console.error("调用组件方法失败：", error));

        console.log("Current center coordinates: " + latitude + ", " + longitude);
    });

    window.addPin = function (map) {
        var center = map.getCenter();
        var marker = new google.maps.Marker({
            position: center,
            map: map,
            title: "Title Here"
        });
    };
}

关键说明 #

• DotNetObjectReference用于在JS和Blazor组件实例之间建立通信桥接，确保JS能准确调用到当前组件的方法
• 实现IAsyncDisposable接口释放DotNetObjectReference，避免长期持有组件引用导致内存泄漏
• 使用invokeMethodAsync异步调用Blazor方法，符合JS的异步执行特性

内容的提问来源于stack exchange，提问作者N. OZER SENOL