API	Description
setMyLocationEnabled(myLocationEnabled: boolean): void	Sets whether to enable the my-location layer function. By default, the continuous location capability of the system is used to display user locations. After the function is enabled, the my-location icon is displayed in the lower right corner of the map by default. When a user taps the my-location icon, the user's current location will be displayed in the center of the screen as a blue dot.
setMyLocationControlsEnabled(enabled: boolean): void	Sets whether to enable the my-location icon. If the my-location layer function is disabled, the system does not respond when the icon is tapped.
setMyLocation(location: geoLocationManager.Location): void	Sets the coordinates of my-location. If you do not use the default location function provided by Map Kit, you can obtain the user's location through Location Kit and send it to Map Kit.
setMyLocationStyle(style: mapCommon.MyLocationStyle): Promise<void>	Sets the style of my-location.
on(type: 'myLocationButtonClick', callback: Callback<void>): void	Listens for my-location icon tap events.
off(type: 'myLocationButtonClick', callback?: Callback<void>): void	Cancels listening for my-location icon tap events.

Development Procedure

[h2]Enabling the my-location Icon

Before enabling the my-location icon, ensure that your app can obtain user location information.

Apply for the ohos.permission.LOCATION and ohos.permission.APPROXIMATELY_LOCATION permissions. You need to declare the required permissions in the module.json5 configuration file. For details, please refer to Declaring Permissions.

{
  "module": {
    // ...
    // ...
    "requestPermissions":[
      {
        // Allow an app running in the foreground to obtain the location information.
        "name" : "ohos.permission.LOCATION",
        // The reason needs to be created in /resources/base/element/string.json.
        "reason": "$string:location_permission",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when":"inuse"
        }
      },
      {
        // Allow an app to obtain the approximate device location.
        "name" : "ohos.permission.APPROXIMATELY_LOCATION",
        // The reason needs to be created in /resources/base/element/string.json.
        "reason": "$string:fuzzy_location_permission",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when":"inuse"
        }
      }
    ]
  }
}

Initialize the map and obtain an object of the map operation class MapComponentController. Call the setMyLocationEnabled method of the mapController object to enable the my-location function.

It is advised to enable the my-location function after user authorization is obtained.

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 {
    // Map initialization parameters used to set the coordinates of the map center point and zoom level.
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      }
    };

    // Map initialization callback.
    this.callback = async (err, mapController) => {
      if (!err) {
        // Obtain the controller class of the map to operate the map.
        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        let permission = await this.checkPermissions();
        if (!permission) {
          this.requestPermissions();
          // Enable the my-location icon.
          this.mapController?.setMyLocationControlsEnabled(true);
        }
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    };
  }

  // Call the checkAccessToken() method to check whether the location permission has been granted to the app.
  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) {
        // Enable the my-location layer. mapController is an object of the map operation class.
        this.mapController?.setMyLocationEnabled(true);
        // Enable the my-location icon.
        this.mapController?.setMyLocationControlsEnabled(true);
        return true;
      }
    }
    return false;
  }

  // If the location permission is not granted, dynamically request authorization from the user.
  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) => {
        // Enable the my-location layer.
        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;

    // Obtain accessTokenID of the app.
    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;

    // Check whether the app has been granted the permission.
    grantStatus = await atManager.checkAccessToken(tokenId, permission);
    console.info('Succeeded in checking access token.');
    return grantStatus;
  }

  build() {
    // ...
      Stack() {
        // Call the MapComponent component to initialize the map.
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');
      }

      // ...
  }
}

Check whether the my-location function is successfully enabled.

The my-location icon is displayed in the lower right corner of the map by default. Tap the my-location icon , and then the current location is displayed in the center of the screen as a blue dot, as shown in the following figure. The effect varies depending on the obtained user location.
Obtain the coordinates of the user location and set the user location.

By default, Map Kit uses the continuous location capability of the system. If you want to customize the display frequency or accuracy, call the geoLocationManager API to obtain the user location coordinates (which is in the WGS84 coordinate system). User authorization is a must if your app needs to access the device location information. For details, please refer to geoLocationManager.

The following example only shows the one-time location result. After the user's coordinates are obtained, call setMyLocation of the mapController object to set the user location. The setMyLocation API uses the WGS84 coordinate system.
```
// Import the @kit.LocationKit module.
import { geoLocationManager } from '@kit.LocationKit';

// ...
              // Obtain the coordinates of a user location.
              let location = await geoLocationManager.getCurrentLocation();

              // Set the user location.
              this.mapController.setMyLocation(location);
```

[h2]Listening for my-location Icon Tap Events

Call the on('myLocationButtonClick') method to set the myLocationButtonClick event listener. After the listening function is enabled, the tap event of the my-location icon needs to be set. If no tap event is set, Map Kit executes the default after-tap event, that is, the map moves to the current user location.

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

[h2]Disabling the my-location Icon

Disable the my-location icon.

this.mapController.setMyLocationControlsEnabled(false);

[h2]Customizing the Location Icon Style

Call the mapController.setMyLocationStyle method to set the user location icon style. The following figure shows the effect.

let style: mapCommon.MyLocationStyle = {
  anchorU: 0.5,
  anchorV: 0.5,
  radiusFillColor: 0xffff0000,
  // Set icon to a custom icon resource when required.
  // The icon is stored in resources/rawfile. Set icon to the relative path of the icon file within the rawfile folder.
  icon: 'test.png'
};
await this.mapController.setMyLocationStyle(style);

[h2]Changing the Stacking Order of the my-location Layer Relative to Overlays

Call the mapController.changeMyLocationLayerOrder method to change the stacking order of the my-location layer relative to overlays. The following figure shows the effect.

// true: The my-location layer is below overlays.
this.mapController?.changeMyLocationLayerOrder(true);

Click to enlarge

目录

Showing My Location