.NET MAUI Google Maps深色模式实现指导请求

嗨，我看你在.NET MAUI里集成Google Maps时，卡在了深色模式的实现上，结合你提供的NavigateToClassPage页面代码，我来给你梳理下可行的解决方案：

首先要明确：MAUI自带的maps:Map控件，在Android平台底层用的是Google Maps，而iOS平台是Apple Maps，目前MAUI的跨层API还没提供统一的深色模式开关，所以得通过平台特定代码来实现，下面分平台给你讲步骤：

一、Android平台（Google Maps深色模式配置） #

这是你重点需要处理的平台，这里有两种常用方法：

方法1：通过Google Maps自定义样式JSON实现深色主题 #

Google Maps允许通过样式JSON文件自定义地图外观，我们可以用这个来实现深色模式：

1. 创建深色样式JSON文件
   你可以用Google官方的地图样式生成工具创建自定义深色主题，导出JSON文件后，放到Android项目的Resources/raw目录下（如果没有raw目录就新建一个），命名为map_style_dark.json，这里给你一个基础的深色样式示例：

   [
     {
       "elementType": "geometry",
       "stylers": [
         { "color": "#212121" }
       ]
     },
     {
       "elementType": "labels.icon",
       "stylers": [
         { "visibility": "off" }
       ]
     },
     {
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#757575" }
       ]
     },
     {
       "elementType": "labels.text.stroke",
       "stylers": [
         { "color": "#212121" }
       ]
     },
     {
       "featureType": "administrative",
       "elementType": "geometry",
       "stylers": [
         { "color": "#757575" }
       ]
     },
     {
       "featureType": "administrative.country",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#9e9e9e" }
       ]
     },
     {
       "featureType": "administrative.land_parcel",
       "stylers": [
         { "visibility": "off" }
       ]
     },
     {
       "featureType": "administrative.locality",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#bdbdbd" }
       ]
     },
     {
       "featureType": "poi",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#757575" }
       ]
     },
     {
       "featureType": "poi.park",
       "elementType": "geometry",
       "stylers": [
         { "color": "#181818" }
       ]
     },
     {
       "featureType": "poi.park",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#616161" }
       ]
     },
     {
       "featureType": "poi.park",
       "elementType": "labels.text.stroke",
       "stylers": [
         { "color": "#1b1b1b" }
       ]
     },
     {
       "featureType": "road",
       "elementType": "geometry.fill",
       "stylers": [
         { "color": "#2c2c2c" }
       ]
     },
     {
       "featureType": "road",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#8a8a8a" }
       ]
     },
     {
       "featureType": "road.arterial",
       "elementType": "geometry",
       "stylers": [
         { "color": "#373737" }
       ]
     },
     {
       "featureType": "road.highway",
       "elementType": "geometry",
       "stylers": [
         { "color": "#3c3c3c" }
       ]
     },
     {
       "featureType": "road.highway.controlled_access",
       "elementType": "geometry",
       "stylers": [
         { "color": "#4e4e4e" }
       ]
     },
     {
       "featureType": "road.local",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#616161" }
       ]
     },
     {
       "featureType": "transit",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#757575" }
       ]
     },
     {
       "featureType": "water",
       "elementType": "geometry",
       "stylers": [
         { "color": "#000000" }
       ]
     },
     {
       "featureType": "water",
       "elementType": "labels.text.fill",
       "stylers": [
         { "color": "#3d3d3d" }
       ]
     }
   ]
   

2. 创建自定义Map Handler应用样式
   在Android项目的Platforms/Android目录下，新建CustomMapHandler.cs，代码如下：

   using Android.Gms.Maps;
   using Microsoft.Maui.Maps.Handlers;
   using Microsoft.Maui.ApplicationModel;
   
   namespace AttendanceWorksMaui.Platforms.Android;
   
   public class CustomMapHandler : MapHandler
   {
       protected override void ConnectHandler(MapView platformView)
       {
           base.ConnectHandler(platformView);
           ApplyMapStyle(platformView.Map);
       }
   
       // 封装样式应用逻辑，方便主题切换时调用
       public void ApplyMapStyle(GoogleMap map)
       {
           if (map == null) return;
           
           var currentTheme = Application.Current?.RequestedTheme;
           if (currentTheme == AppTheme.Dark)
           {
               // 加载深色样式
               var darkStyle = MapStyleOptions.LoadRawResourceStyle(Context, Resource.Raw.map_style_dark);
               map.SetMapStyle(darkStyle);
           }
           else
           {
               // 恢复默认浅色样式
               map.SetMapStyle(null);
           }
       }
   }
   

3. 注册自定义Handler
   在项目根目录的MauiProgram.cs里，添加Handler的注册：

   builder.ConfigureMauiHandlers(handlers =>
   {
       #if ANDROID
       handlers.AddHandler<Microsoft.Maui.Controls.Maps.Map, AttendanceWorksMaui.Platforms.Android.CustomMapHandler>();
       #endif
   });
   

方法2：跟随MAUI主题动态切换 #

为了让地图在用户切换App主题时自动同步深色/浅色模式，你需要在页面里监听主题变化事件，然后触发Map样式更新：
在你的NavigateToClassPage.xaml.cs里添加以下代码：

public partial class NavigateToClassPage : ContentPage
{
    public NavigateToClassPage()
    {
        InitializeComponent();
        // 订阅主题变化事件
        Application.Current.RequestedThemeChanged += OnThemeChanged;
    }

    private void OnThemeChanged(object sender, AppThemeChangedEventArgs e)
    {
        // 触发Map控件的样式更新
        #if ANDROID
        if (map.Handler is AttendanceWorksMaui.Platforms.Android.CustomMapHandler customHandler)
        {
            var androidMap = (map.Handler.PlatformView as Android.Gms.Maps.MapView)?.Map;
            customHandler.ApplyMapStyle(androidMap);
        }
        #endif
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        // 取消订阅，避免内存泄漏
        Application.Current.RequestedThemeChanged -= OnThemeChanged;
    }
}

二、iOS平台（Apple Maps深色模式配置） #

如果你也需要iOS端适配深色模式，同样可以用自定义Handler实现：

1. 在iOS项目的Platforms/iOS目录下创建CustomMapHandler.cs：

   using MapKit;
   using Microsoft.Maui.Maps.Handlers;
   using UIKit;
   
   namespace AttendanceWorksMaui.Platforms.iOS;
   
   public class CustomMapHandler : MapHandler
   {
       protected override void ConnectHandler(MKMapView platformView)
       {
           base.ConnectHandler(platformView);
           ApplyThemeStyle(platformView);
       }
   
       public void ApplyThemeStyle(MKMapView mapView)
       {
           var currentTheme = Application.Current?.RequestedTheme;
           mapView.OverrideUserInterfaceStyle = currentTheme switch
           {
               AppTheme.Dark => UIUserInterfaceStyle.Dark,
               AppTheme.Light => UIUserInterfaceStyle.Light,
               _ => UIUserInterfaceStyle.Unspecified
           };
       }
   }
   

2. 同样在MauiProgram.cs里注册iOS的Handler：

   builder.ConfigureMauiHandlers(handlers =>
   {
       #if IOS
       handlers.AddHandler<Microsoft.Maui.Controls.Maps.Map, AttendanceWorksMaui.Platforms.iOS.CustomMapHandler>();
       #endif
   });
   

3. 页面里的主题变化监听逻辑和Android类似，只需在OnThemeChanged里添加iOS的处理即可。

额外注意事项 #

1. Android项目的raw目录下的JSON文件名必须小写且无空格；
2. 确保Android项目已经正确配置了Google Maps的API Key和权限，在AndroidManifest.xml里有对应的配置；
3. 测试时注意切换App主题，验证地图样式是否同步更新。

内容来源于stack exchange