显示我的位置
======

#### 场景介绍

从6.0.1(21)开始，支持更改我的位置相对覆盖物的顺序。

本章节将向您介绍如何开启和展示“我的位置”功能，“我的位置”指的是进入地图后点击“我的位置”显示当前位置点的功能。效果如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/45/v3/dDigUj5ZSxKalLZMVPaqlA/zh-cn_image_0000002594829234.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073625Z&HW-CC-Expire=86400&HW-CC-Sign=30287F7CF8BCE97B0E02A9EEFB00D1305EF3D3DD446B538EDBB9CE458DFA5E93 "点击放大")

#### 接口说明

“我的位置”功能主要由[MapComponentController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller)的方法实现，更多接口及使用方法请参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocationenabled)。

| 方法名 | 描述 |
| :-- | :-- |
| [setMyLocationEnabled](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocationenabled)(myLocationEnabled: boolean): void | “我的位置”图层功能开关，默认使用系统的连续定位能力显示用户位置。开关打开后，“我的位置”按钮默认显示在地图的右下角。点击“我的位置”按钮，将会在屏幕中心显示当前定位，以蓝色圆点的形式呈现。 |
| [setMyLocationControlsEnabled](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocationcontrolsenabled)(enabled: boolean): void | 设置是否启用“我的位置”按钮。只显示按钮，在不开启“我的位置”图层功能的情况下，点击按钮没反应。 |
| [setMyLocation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocation)(location: [geoLocationManager.Location](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-geolocationmanager#location)): void | 
设置“我的位置”坐标。

如果不使用Map Kit提供的默认定位行为，可以通过[Location Kit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/location-api)获取用户位置后，传给Map Kit。

 |
| [setMyLocationStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocationstyle)(style: [mapCommon.MyLocationStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mylocationstyle)): Promise<void> | 设置“我的位置”样式。 |
| [on](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#onmylocationbuttonclick)(type: 'myLocationButtonClick', callback: Callback<void>): void | 监听“我的位置”按钮点击事件。 |
| [off](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#offmylocationbuttonclick)(type: 'myLocationButtonClick', callback?: Callback<void>): void | 取消监听“我的位置”按钮点击事件。 |

#### 开发步骤

#### \[h2\]开启“我的位置”按钮

1.  在启用“我的位置”功能前，开发者应确保应用已申请并获得用户定位权限，以便正确显示用户当前位置。
    
    申请ohos.permission.LOCATION和ohos.permission.APPROXIMATELY\_LOCATION权限，您需要在module.json5配置文件中声明所需要的权限，具体可参考[声明权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/declare-permissions)。
    
    {
      "module": {
        // ...
        // ...
        "requestPermissions":\[
          {
            // 允许应用在前台运行时获取位置信息
            "name" : "ohos.permission.LOCATION",
            // reason需要在/resources/base/element/string.json中新建
            "reason": "$string:location\_permission",
            "usedScene": {
              "abilities": \[
                "EntryAbility"
              \],
              "when":"inuse"
            }
          },
          {
            // 允许应用获取设备模糊位置信息
            "name" : "ohos.permission.APPROXIMATELY\_LOCATION",
            // reason需要在/resources/base/element/string.json中新建
            "reason": "$string:fuzzy\_location\_permission",
            "usedScene": {
              "abilities": \[
                "EntryAbility"
              \],
              "when":"inuse"
            }
          }
        \]
      }
    }
    
2.  初始化地图并获取[MapComponentController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller)地图操作类对象。调用mapController对象的[setMyLocationEnabled](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocationenabled)方法启用“我的位置”功能。
    
    建议在获得用户授权后开启“我的位置”功能。
    
    import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
    import { BusinessError, AsyncCallback } from '@kit.BasicServicesKit';
    import { MapComponent, mapCommon, map } from '@kit.MapKit';
    
    // ...
    @Entry
    @Component
    struct MapLocationDemo {
      // ...
      private mapOptions?: mapCommon.MapOptions;
      private mapController?: map.MapComponentController;
      private callback?: AsyncCallback<map.MapComponentController>;
      private mapEventManager?: map.MapEventManager;
    
      aboutToAppear(): void {
        // 地图初始化参数，设置地图中心点坐标及层级
        this.mapOptions = {
          position: {
            target: {
              latitude: 39.9,
              longitude: 116.4
            },
            zoom: 10
          }
        };
    
        // 地图初始化的回调
        this.callback = async (err, mapController) => {
          if (!err) {
            // 获取地图的控制器类，用来操作地图
            this.mapController = mapController;
            this.mapEventManager = this.mapController.getEventManager();
            let permission = await this.checkPermissions();
            if (!permission) {
              this.requestPermissions();
              // 启用我的位置按钮
              this.mapController?.setMyLocationControlsEnabled(true);
            }
          } else {
            console.error(\`Failed to initialize the map, code is：${err.code}, message is ${err.message}\`);
          }
        };
      }
    
      // 校验应用是否被授予定位权限，可以通过调用checkAccessToken()方法来校验当前是否已经授权。
      async checkPermissions(): Promise<boolean> {
        const permissions: Permissions\[\] = \['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY\_LOCATION'\];
        for (let permission of permissions) {
          let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission);
          if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION\_GRANTED) {
            // 启用我的位置图层，mapController为地图操作类对象
            this.mapController?.setMyLocationEnabled(true);
            // 启用我的位置按钮
            this.mapController?.setMyLocationControlsEnabled(true);
            return true;
          }
        }
        return false;
      }
    
      // 如果没有被授予定位权限，动态向用户申请授权
      requestPermissions(): void {
        let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
        atManager.requestPermissionsFromUser(this.getUIContext().getHostContext() as common.UIAbilityContext,
          \['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY\_LOCATION'\])
          .then((data: PermissionRequestResult) => {
            // 启用我的位置图层
            this.mapController?.setMyLocationEnabled(true);
          })
          .catch((err: BusinessError) => {
            console.error(\`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}\`);
          })
      }
    
      async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
        let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
        let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION\_DENIED;
    
        // 获取应用程序的accessTokenID
        let tokenId: number = 0;
        let bundleInfo: bundleManager.BundleInfo =
          await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET\_BUNDLE\_INFO\_WITH\_APPLICATION);
        console.info('Succeeded in getting Bundle.');
        let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
        tokenId = appInfo.accessTokenId;
    
        // 校验应用是否被授予权限
        grantStatus = await atManager.checkAccessToken(tokenId, permission);
        console.info('Succeeded in checking access token.');
        return grantStatus;
      }
    
      build() {
        // ...
          Stack() {
            // 调用MapComponent组件初始化地图
            MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');
          }
    
          // ...
      }
    }
    
3.  检查“我的位置”功能是否成功启用。
    
    “我的位置”按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b5/v3/nSxuSWENQR-6EVJW4N1Ykg/zh-cn_image_0000002625188681.png?HW-CC-KV=V1&HW-CC-Date=20260612T073625Z&HW-CC-Expire=86400&HW-CC-Sign=CD3513AF1ED0CAA0DCD7DB7D8679E6429D65232464D766C14E3B42F9F0815404)默认显示在地图的右下角。点击“我的位置”按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/07/v3/X-G-9sHPSzKkda1Uw4cM6Q/zh-cn_image_0000002625108825.png?HW-CC-KV=V1&HW-CC-Date=20260612T073625Z&HW-CC-Expire=86400&HW-CC-Sign=2A99A4205D808F2842305BB79D59F21D1DE1BBB1A2F922D485224FE964BD626E)，将会在屏幕中心显示当前定位，以蓝色圆点的形式呈现，效果如下图所示，效果根据获取到的用户位置会有变化。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a3/v3/1KQkm1G3Q8yPnl1SX_IlJA/zh-cn_image_0000002594669308.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073625Z&HW-CC-Expire=86400&HW-CC-Sign=1BE00153EE6B58D9C0F9FC9D5FB2AC2B93E191C63A85B9465E9D96EDC4983980 "点击放大")
    
4.  获取用户位置坐标并设置用户的位置。
    
    Map Kit默认使用系统的连续定位能力，如果您希望定制显示频率或者精准度，可以调用[geoLocationManager](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-geolocationmanager)相关接口获取用户位置坐标（WGS84坐标系）。注意访问设备的位置信息必须申请权限，并且获得用户授权，详情见[geoLocationManager](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-geolocationmanager)。
    
    下面的示例仅显示一次定位结果，在获取到用户坐标后，调用mapController对象的[setMyLocation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocation)设置用户的位置，[setMyLocation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocation)接口使用的是WGS84坐标系。
    
    // 需要引入@kit.LocationKit模块
    import { geoLocationManager } from '@kit.LocationKit';
    
    // ...
                  // 获取用户位置坐标
                  let location = await geoLocationManager.getCurrentLocation();
    
                  // 设置用户的位置
                  this.mapController.setMyLocation(location);
    

#### \[h2\]监听“我的位置”按钮点击事件

通过调用[on('myLocationButtonClick')](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#onmylocationbuttonclick)方法，设置'myLocationButtonClick'事件监听。设置监听后“我的位置按钮”点击事件自定义，反之不设置则由Map Kit执行点击后默认事件，即地图移动到当前用户位置。

let callback = () => {
  console.info('myLocationButtonClick', \`myLocationButtonClick\`);
};
this.mapEventManager.on('myLocationButtonClick', callback);

#### \[h2\]隐藏“我的位置”按钮

控制是否显示“我的位置”按钮。

this.mapController.setMyLocationControlsEnabled(false);

#### \[h2\]自定义位置图标样式

通过调用mapController.[setMyLocationStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setmylocationstyle)方法，设置用户位置图标样式。效果如下：

let style: mapCommon.MyLocationStyle = {
  anchorU: 0.5,
  anchorV: 0.5,
  radiusFillColor: 0xffff0000,
  // icon为自定义图标资源，使用时需要替换
  // 图标存放在resources/rawfile，icon参数传入rawfile文件夹下的相对路径
  icon: 'test.png'
};
await this.mapController.setMyLocationStyle(style);

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9c/v3/E6G-DqmCQ_i8fKTiBNgsdw/zh-cn_image_0000002594829236.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073625Z&HW-CC-Expire=86400&HW-CC-Sign=70B3B7FD7A5B627AC1148B61929C375B6D96BA2149E5336E9A8EFF152F0A3B70 "点击放大")

#### \[h2\]更改我的位置图层相对于覆盖物的压盖顺序

通过调用mapController.[changeMyLocationLayerOrder](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#changemylocationlayerorder)方法，更改我的位置图层相对于覆盖物的压盖顺序。效果如下：

// true：我的位置图层位于覆盖物之下
this.mapController?.changeMyLocationLayerOrder(true);

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/76/v3/wvKKHfHeRn-MeumX8SyCAA/zh-cn_image_0000002625188683.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073625Z&HW-CC-Expire=86400&HW-CC-Sign=EE6632B9D939D6701DE12E36DC16D353C335E892003C8B790374BDCF55DBC92B "点击放大")