如何在Blazor+Radzen中从数据库生成Google Map标记列表？

问题背景 #

使用Radzen生成Blazor前端，需将数据库Bridge表中所有桥的经纬度显示在RadzenGoogleMap组件的标记上。现有LINQ查询和循环逻辑错误，无法生成有效的GoogleMapPosition列表，导致地图无标记显示。

现有代码核心问题 #

1. GetLatitude/GetLongitude方法冗余且逻辑错误：传入单个Bridge实例后按ID查询，返回仅包含单个值的列表，完全没必要拆分查询。
2. GetPosition方法外层循环无效：posArray是初始化的空数组，for (int i = 0; i < posArray.Length; i++)根本不会执行。
3. 经纬度配对错误：使用SelectMany将单个桥的纬度和所有桥的经度配对，生成大量无效的经纬度组合。
4. Blazor页面标记绑定错误：Label="bridge.name"是固定字符串，未绑定实际桥名。

修正后的完整代码 #

1. 修正数据模型（补充缺失字段） #

确保模型包含数据库表的所有必要字段：

[Table("bridges", Schema = "public")]
public partial class Bridge
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

2. 获取所有桥的数据方法 #

直接从数据库查询所有桥的完整数据，避免拆分查询：

public List<Bridge> GetAllBridges()
{
    return Context.Bridges.ToList();
}

3. 生成带桥名的位置列表 #

创建包含桥名的自定义类，方便页面绑定标记信息：

// 自定义类存储桥的位置和名称
public class BridgeMapMarker
{
    public string BridgeName { get; set; }
    public GoogleMapPosition Position { get; set; }
}

public List<BridgeMapMarker> GetBridgeMarkers()
{
    var allBridges = GetAllBridges();
    return allBridges.Select(b => new BridgeMapMarker
    {
        BridgeName = b.Name,
        Position = new GoogleMapPosition { Lat = b.Latitude, Lng = b.Longitude }
    }).ToList();
}

4. Blazor页面地图标记绑定 #

遍历生成的标记列表，正确绑定桥名和位置：

<RadzenGoogleMap ...> <!-- 保留你的地图基础配置 -->
    <Markers>
        @foreach (var marker in GetBridgeMarkers())
        { 
            <RadzenGoogleMapMarker 
                Label="@marker.BridgeName" 
                Position="@marker.Position" 
                Title="@marker.BridgeName">
            </RadzenGoogleMapMarker>
        }
    </Markers>
</RadzenGoogleMap>

关键优化点 #

• 一次性查询所有桥数据，减少数据库交互次数
• 直接通过Select将每个桥的经纬度映射为GoogleMapPosition，避免错误的配对逻辑
• 保留桥名信息，让标记显示对应的桥名称
• 简化代码结构，移除无效循环和冗余方法

内容的提问来源于stack exchange，提问作者David Naddalll