【鸿蒙开发】Map Kit地图服务- 怎样在鸿蒙应用利用定位能力？
一、华为地图开发准备工作1. 设置 Client ID：
在完成基本准备及公钥指纹设置后，登录 AppGallery Connect（AGC） 平台获取目标应用的 Client ID（非项目的），并于工程 entry 模块的 module.json5 文件里，在 metadata 中新增设置，名称设为 client_id，值为所取 Client ID。
https://i-blog.csdnimg.cn/direct/dea9ba544514447e8501ceab88f4ac06.png
"module": {
"name": "xxxx",
"type": "entry",
"description": "xxxx",
"mainElement": "xxxx",
"deviceTypes": [
'phone',
'tablet'
],
"pages": "xxxx",
"abilities": [],
"metadata": [
{
"name": "client_id",
"value": "xxxxxx"// 配置为获取的Client ID
}
]
} 2. 开通地图服务：
登录 AGC 网站，选 “我的项目”，在项目下挑中需开地图服务的应用，经 API 管理寻地图服务开关开启，为地图开发筑牢根基，助开发者提升应用 LBS 体验、实现地图个性化呈现与交互。
https://i-blog.csdnimg.cn/direct/029c5bdd0e0145778bcd9082aa0edcf2.png
二、表现地图
1.导入 Map Kit 模块
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit'; 2. 设 mapOptions 定地图中心及层级
@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 展示
}; MapOptions包含以部属性
属性
描述
mapType
地图类型，默认值：MapType.STANDARD。
position
地图相机位置。
bounds
地图展示框。
minZoom
地图最小图层，有效范围，默认值：2。
maxZoom
地图最大图层，有效范围，默认值：20。
rotateGesturesEnabled
是否支持旋转手势，默认值：true。
scrollGesturesEnabled
是否支持滑动手势，默认值：true。
zoomGesturesEnabled
是否支持缩放手势，默认值：true。
tiltGesturesEnabled
是否支持倾斜手势，默认值：true。
zoomControlsEnabled
是否展示缩放控件，默认值：true。
myLocationControlsEnabled
是否展示我的位置按钮，默认值：false。
compassControlsEnabled
是否展示指南针控件，默认值：true。
scaleControlsEnabled
是否展示比例尺，默认值：false。
alwaysShowScaleEnabled
是否始终表现比例尺，默认值：false。
padding
设置地图和界限的间隔。
styleId
自定义样式ID。
dayNightMode
日间夜间模式，默认值：DayNightMode.DAY（日间模式）。
3. 经 callback 取 MapComponentController
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);
}
};
} 4. 调 MapComponent 初始化地图以呈如今 APP
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%')
} 三、获取我的位置
接口阐释：
MapComponentController 含多关键方法：
[*] setMyLocationEnabled 控 “我的位置” 图层开关及表现效果；
[*]setMyLocationControlsEnabled 管按钮启用；
[*]setMyLocation 设位置坐标；
[*]setMyLocationStyle 定样式；
[*]on 与 off 分别监听、取消监听按钮点击事件，各方法依规则与参数精准操控功能细节。
1. 权限获取 + 功能启用：
依权限获取方式在适当时机调用 setMyLocationEnabled 与 setMyLocationControlsEnabled 激活功能，过程含权限校验、申请授权及状态处理逻辑链。
方式一用安全控件 LocationButton；
在 ArkUI 框架下创建一个按钮组件，用于触发安全控件 LocationButton 的点击事件以申请权限并开启地图与 “我的位置” 功能：
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.json5 声明 ohos.permission.LOCATION 与 ohos.permission.APPROXIMATELY_LOCATION 权限后申请，且需精心设置权限理由及应用场景等。
{
"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();
}
})
}
}
} 2. 功能检查与拓展操作：
查功能启用状态看按钮及定位表现；
借 geoLocationManager 接口获坐标设位置，留意坐标系转换；
// 需要引入@kit.LocationKit模块
import { geoLocationManager } from '@kit.LocationKit';
// ...
// 获取用户位置坐标
let location = await geoLocationManager.getCurrentLocation();
// 设置用户的位置
this.mapController.setMyLocation(location); 用 on 方法监听按钮点击事件，定制交互；
let callback = () => {
console.info("myLocationButtonClick", `myLocationButtonClick`);
};
this.mapEventManager.on("myLocationButtonClick", callback); setMyLocationStyle 依 mapCommon.MyLocationStyle 规则自定义图标样式，全方位构建灵活、精准的 “我的位置” 功能体系，提升地图用户体验与交互性。
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);
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]