如何在Blazor的Telerik Map UI中添加Bing地图瓦片？

Bing地图瓦片无法像OpenStreetMap那样直接通过普通HTTPS URL配置，核心原因是Bing地图需要API密钥验证，且瓦片URL的构造逻辑包含动态参数（如瓦片坐标、缩放级别、密钥），Telerik Map针对Bing地图提供了专门的图层配置方式，而非直接指定静态瓦片URL。以下是具体实现步骤：

1. 获取Bing Maps API密钥 #

前往微软官方Bing Maps开发者中心申请API密钥，可选择免费额度或付费套餐，确保密钥具备访问地图瓦片的权限。

2. 配置Telerik Map的Bing图层 #

在Blazor组件中，使用TelerikMapLayer并指定Type="MapLayerType.Bing"，同时传入API密钥和地图类型参数即可：

@using Telerik.Blazor.Components.Map

<TelerikMap Center="@MapCenter" Zoom="5">
    <MapLayers>
        <!-- 道路图 -->
        <TelerikMapLayer Type="MapLayerType.Bing" 
                         BingKey="你的Bing Maps API密钥"
                         BingType="MapBingType.Road">
        </TelerikMapLayer>

        <!-- 可选：切换为航拍图或带标签的航拍图 -->
        <!-- <TelerikMapLayer Type="MapLayerType.Bing" 
                         BingKey="你的Bing Maps API密钥"
                         BingType="MapBingType.Aerial">
        </TelerikMapLayer> -->
        <!-- <TelerikMapLayer Type="MapLayerType.Bing" 
                         BingKey="你的Bing Maps API密钥"
                         BingType="MapBingType.AerialWithLabels">
        </TelerikMapLayer> -->
    </MapLayers>
</TelerikMap>

@code {
    // 设置地图初始中心点（示例为中国北京附近坐标）
    private double[] MapCenter { get; set; } = new double[] { 39.9042, 116.4074 };
}

关键说明 #

• BingType支持三种可选值：
  • MapBingType.Road：标准道路地图
  • MapBingType.Aerial：纯航拍影像
  • MapBingType.AerialWithLabels：带道路、地名标签的航拍图
• 无需手动构造瓦片URL，Telerik组件会自动处理Bing地图的瓦片请求逻辑，包括参数拼接和密钥验证
• 确保API密钥未过期、无访问限制，且项目网络可正常连接Bing地图服务器

内容的提问来源于stack exchange，提问作者Kaouthar kaouthar