Blazor中JavaScript与C#交互及Leaflet地图操作技术问询

1. JavaScript与C#能否通信？如何实现？ #

可以双向通信，具体实现分为两种方向：

（1）C#调用JavaScript #

通过Blazor提供的IJSRuntime接口实现，这也是你当前初始化地图用到的方式。核心方法包括：

• InvokeVoidAsync：调用无返回值的JavaScript函数
• InvokeAsync<T>：调用有返回值的JavaScript函数，并指定返回值的C#类型

（2）JavaScript调用C# #

在C#方法上标记[JSInvokable]特性，开放该方法供JavaScript访问；之后在JavaScript中通过DotNet.invokeMethodAsync（异步）或DotNet.invokeMethod（同步）调用。

示例：

C#代码（Razor组件中）

[JSInvokable]
public static string GetCSharpMessage()
{
    return "这是来自C#的响应";
}

JavaScript代码

async function callCSharpMethod() {
    const message = await DotNet.invokeMethodAsync('你的项目程序集名称', 'GetCSharpMessage');
    console.log(message);
}

2. 从C#操作JavaScript中的Leaflet地图对象、触发函数、传参并获取返回值 #

要实现这个需求，需要先让Leaflet的map对象全局可访问，再封装对应的地图操作函数，最后通过IJSRuntime调用这些函数。

步骤1：修改JavaScript代码，暴露全局地图对象 #

修改index.html中的displayMapJS函数，将局部的map变量挂载到window对象上，同时封装常用的地图操作函数：

<script>
    window.displayMapJS = () => {
        // 将map实例挂载到window，让全局可访问
        window.map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=rzE5ZFAnhim5yWM3jJsC', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
        }).addTo(window.map);
    }

    // 封装设置地图视图的函数
    window.setMapView = (lat, lng, zoom) => {
        window.map.setView([lat, lng], zoom);
    }

    // 封装添加标记点的函数，返回标记ID
    window.addMapMarker = (lat, lng, popupText) => {
        const marker = L.marker([lat, lng]).addTo(window.map);
        if (popupText) {
            marker.bindPopup(popupText).openPopup();
        }
        return marker._leaflet_id;
    }

    // 封装获取地图中心点的函数
    window.getMapCenter = () => {
        const center = window.map.getCenter();
        return { Lat: center.lat, Lng: center.lng };
    }
</script>

步骤2：在Blazor组件中调用地图操作函数 #

修改index.razor，添加交互按钮并实现调用逻辑：

@page "/"
@using System.Diagnostics
@inject IJSRuntime JS

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

<button class="btn btn-primary" @onclick="SetViewToBeijing">切换到北京视图</button>
<button class="btn btn-secondary" @onclick="AddTiananmenMarker">添加天安门标记</button>
<button class="btn btn-info" @onclick="ShowCurrentCenter">显示当前中心点</button>

<p>当前中心点：@centerInfo</p>

@code{
    private string centerInfo = "";

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            try
            {
                await JS.InvokeVoidAsync("displayMapJS");
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
            }
        }
    }

    private async Task SetViewToBeijing()
    {
        // 传递纬度、经度、缩放级别参数
        await JS.InvokeVoidAsync("setMapView", 39.9042, 116.4074, 12);
    }

    private async Task AddTiananmenMarker()
    {
        // 传递参数并获取返回的标记ID
        var markerId = await JS.InvokeAsync<int>("addMapMarker", 39.9042, 116.4074, "北京天安门");
        Debug.WriteLine($"新增标记ID：{markerId}");
    }

    private async Task ShowCurrentCenter()
    {
        // 获取返回的中心点对象，需定义对应的数据类
        var center = await JS.InvokeAsync<MapCenter>("getMapCenter");
        centerInfo = $"纬度：{center.Lat:F4}，经度：{center.Lng:F4}";
        StateHasChanged();
    }

    // 用于接收JavaScript返回的中心点数据的类
    public class MapCenter
    {
        public double Lat { get; set; }
        public double Lng { get; set; }
    }
}

核心要点 #

• 全局地图对象：必须将Leaflet的map实例挂载到window上，否则C#无法间接访问到该实例
• 封装JS函数：避免在C#中拼接复杂JS逻辑，封装成独立函数可提升代码可维护性
• 参数与返回值：基本类型（数字、字符串等）可直接传递/返回；复杂类型需在C#中定义对应类，JavaScript返回的JSON会自动序列化到该类实例中

内容的提问来源于stack exchange，提问作者Razvan Emil