如何设置地图深色模式、浅色模式和自定义颜色
=====================

#### 问题现象

根据不同使用场景进行深色模式、浅色模式切换是常见地图使用场景之一，如何实现Map Kit地图的深色模式、浅色模式配置？如何自定义地图的颜色？

#### 背景知识

*   开发准备：使用地图服务，需要先[开通地图服务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc#section16133115441516)。
*   [setDayNightMode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#section123945545109)：设置地图的日间夜间模式，对应配模式配置值请参见[DayNightMode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#section634916281725)。
*   [Petal Maps Studio](https://developer.petalmaps.com/console/studio/)：管理地图样式网站。
*   [setCustomMapStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#section70103143520)：将地图样式修改为自定义样式。

#### 解决方案

*   场景一：加载地图时，默认显示为深色模式。
    
    在地图初始化mapOptions参数中，配置DayNightMode为mapCommon.DayNightMode.NIGHT。
    
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      },
      myLocationControlsEnabled: true,
      _// 设置地图为夜间模式_
      dayNightMode: mapCommon.DayNightMode.NIGHT
    };
    
*   场景二：切换地图为深色模式。
    
    配置调用setDayNightMode接口配置DayNightMode为NIGHT。
    
    Button('切换为深色模式')
      .onClick(() => {
        this.mapController?.setDayNightMode(mapCommon.DayNightMode.NIGHT);
      })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/16/v3/eCZEwgJ_R3mJiqIT-W7J-g/zh-cn_image_0000002658793653.png?HW-CC-KV=V1&HW-CC-Date=20260709T134310Z&HW-CC-Expire=86400&HW-CC-Sign=F28BB35DF2DF634820E476308D430F0D51A474183E3E8BF99273A9FD6425E1B7 "点击放大")
    
*   场景三：切换地图为浅色模式。
    
    配置调用setDayNightMode接口配置DayNightMode为DAY。
    
    Button('切换为浅色模式')
      .onClick(() => {
        this.mapController?.setDayNightMode(mapCommon.DayNightMode.DAY);
      })
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e2/v3/MLFAgPs9TfaQnm-n90fXyg/zh-cn_image_0000002628554286.png?HW-CC-KV=V1&HW-CC-Date=20260709T134310Z&HW-CC-Expire=86400&HW-CC-Sign=73DEDE9CB45067D250E92C9F9057D3A865FE0635B7590F1E62E92E55B0ACA4A5 "点击放大")
    
*   场景四：地图颜色跟随系统深色模式配置。
    
    配置调用setDayNightMode接口配置DayNightMode为AUTO。
    
    Button('切换为跟随系统深色模式')
      .onClick(() => {
        this.mapController?.setDayNightMode(mapCommon.DayNightMode.AUTO);
      });
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b7/v3/rlO9e700Q5SuQlC0--O05g/zh-cn_image_0000002658913609.png?HW-CC-KV=V1&HW-CC-Date=20260709T134310Z&HW-CC-Expire=86400&HW-CC-Sign=FDBF2A17AC4DD71DA14595FBE562EB20B7314E29D72780E77046DBC45771B269 "点击放大")
    
*   场景五：配置地图为自定义颜色。
    
    1.  登录[Petal Maps Studio](https://developer.petalmaps.com/console/studio/)网站，点击首页中的“Start”按钮。
    2.  点击页面右上角的“Create map”按钮，在新页面中点击预设的“Standard”、“Simple”、“Night”三种地图样式。
    3.  在地图样式配置和预览页面，左侧选择需要配置的地图元素，依次选择“Feature type”、“Element type”、“Stylers”，通过配置Stylers中的Color来自定义对应元素的颜色。
    4.  点击页面“SAVE”按钮后，参考产品文档中显示自定义地图的[开发步骤](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-style#section1220513172417)进行自定义地图加载。
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d5/v3/vKAR-od2SFaRnFeqQ1eAFA/zh-cn_image_0000002628394392.png?HW-CC-KV=V1&HW-CC-Date=20260709T134310Z&HW-CC-Expire=86400&HW-CC-Sign=D4DC94F09B2B893BE608899419E098339F5531A28CE9EBBB9DEE6769A0531AA9 "点击放大")
        
    
    完整代码：
    
    import { MapComponent, mapCommon, map } from '@kit.MapKit';
    import { AsyncCallback } from '@kit.BasicServicesKit';
    import { display } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct MapDayNightMode {
      private mapOptions?: mapCommon.MapOptions;
      private callback?: AsyncCallback<map.MapComponentController>;
      private mapController?: map.MapComponentController;
      @State mapHeight: number = 0;
    
      aboutToAppear(): void {
        let displayClass = display.getDefaultDisplaySync();
        this.mapHeight = this.getUIContext().px2vp(displayClass.height);
       _ // 地图初始化参数，设置地图中心点坐标及层级_
        this.mapOptions = {
          position: {
            target: {
              latitude: 39.9,
              longitude: 116.4
            },
            zoom: 10
          },
          myLocationControlsEnabled: true,
         _ // 设置地图为夜间模式_
          dayNightMode: mapCommon.DayNightMode.NIGHT
        };
    
      _  // 地图初始化的回调_
        this.callback = async (err, mapController) => {
          if (!err) {
          _  // 获取地图的控制器类，用来操作地图_
            this.mapController = mapController;
    
          } else {
            console.error(\`Failed to initialize the map, code is：${err.code}, message is ${err.message}\`);
          }
        };
      }
    
     _ // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效_
      onPageShow(): void {
       _ // 将地图切换到前台_
        if (this.mapController) {
          this.mapController.show();
        }
      }
    
     _ // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效_
      onPageHide(): void {
       _ // 将地图切换到后台_
        if (this.mapController) {
          this.mapController.hide();
        }
      }
    
      build() {
        Stack({ alignContent: Alignment.Bottom }) {
          Column() {
            MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
              .height(this.mapHeight);
          _  // .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\])_
          }.width('100%');
    
          Column() {
            Button('切换为深色模式')
              .onClick(() => {
                this.mapController?.setDayNightMode(mapCommon.DayNightMode.NIGHT);
              })
              .margin({ bottom: 2 });
            Button('切换为浅色模式')
              .onClick(() => {
                this.mapController?.setDayNightMode(mapCommon.DayNightMode.DAY);
              })
              .margin({ bottom: 2 });
            Button('切换为跟随系统深色模式')
              .onClick(() => {
                this.mapController?.setDayNightMode(mapCommon.DayNightMode.AUTO);
              });
          };
        }.height('100%')
        .ignoreLayoutSafeArea();
      }
    }