在MAUI Blazor的Razor视图中接入Google Maps的技术咨询

你当前的代码存在两个核心问题：

• 误用MAUI原生Map控件：Microsoft.Maui.Controls.Maps.Map是MAUI专属的原生UI控件，无法直接通过<myMap />标签在Blazor Razor页面中渲染，Blazor有独立的组件模型和渲染逻辑。
• 实例化的Map未关联DOM：即使在OnAfterRenderAsync中创建了Map对象，也没有将其绑定到页面的DOM元素或Blazor渲染树中，因此无法显示。

以下分两种场景给出可行的实现方案：

场景1：MAUI Blazor项目集成地图 #

如果你的项目是MAUI Blazor（混合应用），可以通过原生权限配置+第三方组件实现：

步骤1：配置地图权限 #

• Android：在Platforms/Android/AndroidManifest.xml中添加权限

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

• iOS：在Platforms/iOS/Info.plist中添加位置权限说明

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问位置信息以显示地图</string>

步骤2：使用第三方MAUI Blazor地图组件 #

以Syncfusion Blazor Maps为例，安装NuGet包后直接在Razor页面中使用：

@page "/"
@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
            <MapsMarkers>
                <MapsMarker Visible=true DataSource="markers" XValuePath="Longitude" YValuePath="Latitude"></MapsMarker>
            </MapsMarkers>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    public class MarkerData
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }

    private List<MarkerData> markers = new List<MarkerData> { new MarkerData { Latitude = 39.90923, Longitude = 116.397428 } };
}

场景2：普通Blazor项目（WebAssembly/Server）集成地图 #

对于纯Web的Blazor项目，推荐通过JS互操作调用前端地图API或使用Blazor专用地图组件：

方式A：JS互操作调用高德地图 #

1. 引入高德SDK：在wwwroot/index.html（WebAssembly）或Pages/_Layout.cshtml（Server）中添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的高德开发者Key"></script>
<script src="js/map.js"></script>

2. Razor页面代码

@page "/"
@inject IJSRuntime JSRuntime

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

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initMap");
        }
    }
}

3. 编写wwwroot/js/map.js初始化逻辑

function initMap() {
    const map = new AMap.Map('mapContainer', {
        center: [116.397428, 39.90923],
        zoom: 13
    });
    // 添加自定义标记
    const marker = new AMap.Marker({
        position: [116.397428, 39.90923],
        title: '测试位置'
    });
    map.add(marker);
}

方式B：使用BlazorGoogleMaps组件 #

1. 安装NuGet包

Install-Package BlazorGoogleMaps

2. Razor页面中使用

@page "/"
@using BlazorGoogleMaps

<GoogleMap @ref="map" Id="map" Options="mapOptions" Style="height:600px; width:100%;"></GoogleMap>

@code {
    private GoogleMap map;
    private MapOptions mapOptions;

    protected override void OnInitialized()
    {
        mapOptions = new MapOptions
        {
            Center = new LatLngLiteral { Lat = 39.90923, Lng = 116.397428 },
            Zoom = 13
        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var marker = new Marker
            {
                Position = new LatLngLiteral { Lat = 39.90923, Lng = 116.397428 },
                Title = "测试位置"
            };
            await map.AddMarker(marker);
        }
    }
}

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