Harmonyos5应用开发实战------地图组件集成与定位功能实现
文章内容概要
本文聚焦于HarmonyOS 5应用开发中地图组件集成与定位功能的实现。详细介绍了如何在应用中集成地图组件,获取用户定位权限,展示商家位置,并实现跳转到花瓣地图导航的功能。
核心功能介绍
1. 组件状态与属性初始化
在组件中定义了多个状态变量,用于存储地图相关信息,如经纬度、店铺信息、地图控制器等,并设置了地图的样式。
typescript
@Component
export struct HwMap {
@Consume('pageStack') pageStack: NavPathStack
@State windowTopHeight: number = AppStorage.get('windowTopHeight') as number || 38.77
@State latitude: number = 0
@State longitude: number = 0
@State storeInfo?: StoreInfo = undefined
@State mapController?: map.MapComponentController | undefined = undefined;
@State myLocation: geoLocationManager.Location | undefined = undefined;
@State isShowMyLocation: boolean = false;
private marker?: map.Marker;
private mapOption?: mapCommon.MapOptions;
private callback?: AsyncCallback<map.MapComponentController>;
private style: mapCommon.MyLocationStyle = {
anchorU: 0.5,
anchorV: 0.5,
radiusFillColor: 0xff00FFFFFF,
displayType: mapCommon.MyLocationDisplayType.FOLLOW,
};
}
2. 参数获取与权限请求
在组件即将显示时,通过getParams
方法获取路由参数,得到店铺的经纬度和信息。同时,使用initPermission
方法请求定位权限,若用户授权成功,则获取用户当前位置并在地图上显示。
typescript
aboutToAppear(): void {
this.getParams()
this.initPermission()
this.mapOption = {
position: {
target: {
latitude: this.latitude,
longitude: this.longitude,
},
zoom: 15,
},
};
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
this.mapController.on('mapLoad', () => {
console.info('mapLoad success');
});
this.abilityEnabled();
mapController.setMyLocationStyle(this.style);
if (this.isShowMyLocation) {
this.getLocation(this.mapController).then((location: geoLocationManager.Location) => {
console.info('my location' + JSON.stringify(location));
this.myLocation = location;
});
}
// Marker初始化参数
let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: this.latitude,
longitude: this.longitude,
},
rotation: 0,
visible: true,
zIndex: 0,
alpha: 1,
anchorU: 0.5,
anchorV: 1,
clickable: true,
draggable: true,
flat: false,
};
// 创建Marker
this.marker = await this.mapController.addMarker(markerOptions);
await this.marker.setIcon($r('app.media.store_location'));
this.mapController?.animateCamera(map.newLatLng({
latitude: this.latitude,
longitude: this.longitude,
}, 15), 200);
}
};
}
getParams() {
let paramsArr: HwMapModel[] = this.pageStack.getParamByName('HwMap') as HwMapModel[]
if (paramsArr.length) {
let routerParam = paramsArr[paramsArr.length-1]
this.latitude = routerParam?.latitude ?? 0
this.longitude = routerParam?.longitude ?? 0
this.storeInfo = routerParam?.storeInfo ?? undefined
}
}
initPermission() {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
atManager.requestPermissionsFromUser(getContext(this) as common.UIAbilityContext,
['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
.then((data) => {
let grantStatus: Array<number> = data.authResults;
// 用户授权,可以继续访问目标操作
this.isShowMyLocation = grantStatus.every(item => item === Constants.USER_GRANT_SUCCESS)
if (this.isShowMyLocation) {
// 授权成功
this.getLocation(this.mapController).then((location: geoLocationManager.Location) => {
console.info('my location' + JSON.stringify(location));
this.myLocation = location;
this.mapController?.setMyLocationEnabled(true);
this.mapController?.setMyLocationControlsEnabled(true);
this.mapController?.setZoomControlsEnabled(false);
});
}
}).catch((err: BusinessError) => {
console.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`);
});
}