如何实现地图不显示地铁路线
=============

#### 问题现象

如何实现在地图上去掉地铁路线的显示？

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9c/v3/EFMM_dINS2idg4ZGo4jc8w/zh-cn_image_0000002658793631.png?HW-CC-KV=V1&HW-CC-Date=20260709T134309Z&HW-CC-Expire=86400&HW-CC-Sign=BF28F0EBD14CE0AE7BA3AD67579AC3D4A1262F4D7652503D76E16305BCA9EA38 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f6/v3/7JO9Qys0TYqP_rF602k3tw/zh-cn_image_0000002628554264.png?HW-CC-KV=V1&HW-CC-Date=20260709T134309Z&HW-CC-Expire=86400&HW-CC-Sign=D37A1507441F8B3BB68F58E4553234399F5651501EB4B81AA15AD2FFB3DEE4C6 "点击放大")

#### 背景知识

*   Map Kit（地图服务）为开发者提供强大而便捷的地图能力，开发前需开通地图服务，参考：[开通地图服务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc#section16133115441516)。
*   Map Kit提供两种方法设置自定义地图样式：设置样式ID和设置样式内容，该示例使用[设置样式内容](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-style#section1679973155918)。

#### 解决方案

地铁路线使用transit.metro-line属性控制，配置如下：

// 自定义样式参数
let param: mapCommon.CustomMapStyleOptions \= {
  styleContent: \`\[{
    "mapFeature": "transit.metro-line",
    "options": "all",
    "visibility": false
  }\]\`
};

具体实现代码如下：

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

@Entry
@Component
struct CustomMapStyleDemo {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController\>;

  aboutToAppear(): void {
    // 地图初始化参数
    this.mapOptions \= {
      position: {
        target: {
          latitude: 31.984410259206815,
          longitude: 118.76625379397866
        },
        zoom: 15
      }
    };
    this.callback \= async (err, mapController) \=\> {
      if (!err) {
        this.mapController \= mapController;
        // 自定义样式参数
        let param: mapCommon.CustomMapStyleOptions \= {
          styleContent: \`\[{
            "mapFeature": "transit.metro-line",
            "options": "all",
            "visibility": false
          }\]\`
        };
        // 设置自定义样式
        try {
          await this.mapController.setCustomMapStyle(param);
        } catch (error) {
          console.error(\`setCustomMapStyle fail, code is：${error.code}, message is ${error.message}\`);
        }
      } else {
        console.error(\`init map fail, code is：${err.code}, message is ${err.message}\`);
      }
    };
  }

  build() {
    Stack() {
      Column() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
      }.width('100%');
    }.height('100%');
  }
}