【鸿蒙开发】Map Kit地图服务- 怎样在鸿蒙应用利用定位能力？ - IT评测·应用市场-qidao123.com

"module": {
"name": "xxxx",
"type": "entry",
"description": "xxxx",
"mainElement": "xxxx",
"deviceTypes": [
'phone',
'tablet'
],
"pages": "xxxx",
"abilities": [],
"metadata": [
{
"name": "client_id",
"value": "xxxxxx" // 配置为获取的Client ID
}
]
}

复制代码

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

复制代码

@Entry
@Component
struct MapApp {
// 地图初始化参数
private mapOptions: mapCommon.MapOptions = {
position: {
target: {
latitude: 39.9, // 地图中心纬度，可按需修改
longitude: 116.4 // 地图中心经度，可按需修改
},
zoom: 10 // 地图层级，可调整
},
// 可按需设置其他地图属性，如是否支持旋转手势等
rotateGesturesEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
tiltGesturesEnabled: true,
mapType: mapCommon.MapType.STANDARD, // 地图类型，可切换
myLocationControlsEnabled: false, // 是否展示我的位置按钮，可设为 true 开启
compassControlsEnabled: true, // 是否展示指南针控件
scaleControlsEnabled: false // 是否展示比例尺，可设为 true 展示
};

复制代码

private callback: AsyncCallback<map.MapComponentController> = () => {
}
private mapController?: map.MapComponentController
private mapEventManager?: map.MapEventManager
aboutToAppear() {
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
this.mapEventManager = this.mapController.getEventManager();
let callback = () => {
console.info("MapApp", `on-mapLoad`);
};
this.mapEventManager.on("mapLoad", callback);
}
};
}

复制代码

onPageShow() {
if (this.mapController) {
this.mapController.show();
}
}
onPageHide() {
if (this.mapController) {
this.mapController.hide();
}
}
build() {
Stack() {
// 初始化地图组件
MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
.width('100%')
.height('100%');
}.height('100%')
}

复制代码

import { LocationButton, LocationButtonOptions, LocationIconStyle, LocationDescription, ButtonType, ClickEvent, LocationButtonOnClickResult } from '@ohos.security.components';
@Entry
@Component
struct MapLocationApp {
build() {
Column() {
// 创建默认样式的 LocationButton 并监听点击事件
LocationButton()
.onClick((event: ClickEvent, result: LocationButtonOnClickResult) => {
console.info("点击结果: " + result);
if (result === LocationButtonOnClickResult.SUCCESS) {
// 在此处添加成功获取权限后开启地图及“我的位置”功能的代码
// 假设已获取到 mapController 实例
this.mapController.setMyLocationEnabled(true);
this.mapController.setMyLocationControlsEnabled(true);
} else if (result === LocationButtonOnClickResult.TEMPORARY_AUTHORIZATION_FAILED) {
console.error("位置权限授权失败");
}
})
// 创建仅显示线条样式图标的 LocationButton
LocationButton({ icon: LocationIconStyle.LINES })
// 创建显示线条样式图标与胶囊背景的 LocationButton，并设置背景色（注意背景色高八位的α值限制）
LocationButton({ icon: LocationIconStyle.LINES, buttonType: ButtonType.Capsule })
.backgroundColor(0x10007dff)
// 创建显示线条样式图标、“当前位置”文本与胶囊背景的 LocationButton，并设置字体大小与尺寸（处理文本换行与控件完整性）
LocationButton({ icon: LocationIconStyle.LINES, text: LocationDescription.CURRENT_LOCATION, buttonType: ButtonType.Capsule })
.fontSize(16)
.width(30)
}
}
}

复制代码

{
"module": {
// 其他配置项...
"requestPermissions":[
{
"name": "ohos.permission.LOCATION",
"reason": "$string:location_permission",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when":"inuse"
}
},
{
"name": "ohos.permission.APPROXIMATELY_LOCATION",
"reason": "$string:approximately_location_permission",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when":"inuse"
}
}
]
}
}

复制代码

import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct MapLocationApp {
// 假设已在其他地方获取到 MapComponentController 实例 mapController
private mapController: MapComponentController;
async checkPermissions(): Promise<boolean> {
const permissions: Array<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) {
// 启用我的位置图层
this.mapController?.setMyLocationEnabled(true);
// 启用我的位置按钮
this.mapController?.setMyLocationControlsEnabled(true);
return true;
}
}
return false;
}
requestPermissions(): void {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
atManager.requestPermissionsFromUser(getContext() 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() {
Column() {
Button('检查并申请权限')
.onClick(() => {
if (!this.checkPermissions()) {
this.requestPermissions();
}
})
}
}
}

复制代码

// 需要引入@kit.LocationKit模块
import { geoLocationManager } from '@kit.LocationKit';
// ...
// 获取用户位置坐标
let location = await geoLocationManager.getCurrentLocation();
// 设置用户的位置
this.mapController.setMyLocation(location);

复制代码

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

复制代码

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);

复制代码