## 技术栈
Appgallery connect
## 开发准备
上一节我们实现了获取当前用户的位置，并且成功的拿到了经纬度，这一节我们就要根据拿到的经纬度，结合我们其他的知识点来实现地图的展示。
## 功能分析
地图的展示，我们需要在管理中心先给我们对应的应用开启地图api功能，否则是不能展示的，其次是我们要配置自签，不配置的话也是无法使用地图功能，然后我们还需要注意应用是否开启了联网权限，如果这些都已经完成，那么我们在地图显示之前还需要进行权限时候获取的校验
## 代码实现
首先我们在进入页面之前判断是否已经开启了定位权限
bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
}).catch((err: BusinessError) => {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed. Cause: %{public}s', err.message);
});
要实现这个功能我们还需要获取app的acctokenid
bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
atManager.checkAccessToken(data.appInfo.accessTokenId, 'ohos.permission.LOCATION').then((status: abilityAccessCtrl.GrantStatus) => {
if (status==0) {
this.addressSetting=true
this.locationKey=true
this.reqPermissionsFromUser(permissions);
}
}).catch((err: BusinessError) => {
console.error(`checkAccessToken fail, err->${JSON.stringify(err)}`);
});
}).catch((err: BusinessError) => {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed. Cause: %{public}s', err.message);
});
这时候我们就通过反悔的status进行判断，当status等于0，我们就执行reqPermissionsFromUser，获取当前的位置经纬度，然后在里边实现地图参数的初始化和回调
this.mapOptions = {
position: {
target: {
latitude: locationInfo.latitude,
longitude: locationInfo.longitude
},
zoom: 10
}
};
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
this.mapEventManager = this.mapController.getEventManager();
let callback = () => {
console.info("TAG", `on-mapLoad`);
}
this.mapEventManager.on("mapLoad", callback);
}
};
都实现之后我们再添加对应的生命周期方法
onPageShow(): void {
if (this.mapController) {
this.mapController.show();
}
}
onPageHide(): void {
if (this.mapController) {
this.mapController.hide();
}
}
到这里我们的地图展示就实现了，完整代码如下
```
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
import PermissionDialogWidget from '../dialog/PermissionDialogWidget';
import { geoLocationManager } from '@kit.LocationKit';
import { abilityAccessCtrl, bundleManager, common, Permissions } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
const permissions: Array
let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;
@Entry
@Component
struct PushAddressPage {
private mapOptions?: mapCommon.MapOptions;
private callback?: AsyncCallback
private mapController?: map.MapComponentController;
private mapEventManager?: map.MapEventManager;
@State flag:boolean=false
@State ss:number=0
@State locationKey:boolean=false
@State addressSetting:boolean=false
permissionController:CustomDialogController=new CustomDialogController({
builder:PermissionDialogWidget({
titleText:"权限说明",
contentText: 'xxx想要申请位置权限，用于地址选择等功能。同意该权限后，选择地址时会复用此权限，不会重新申请，不授权上述权限，不影响APP其他功能使用。',
}),
alignment: DialogAlignment.Top,
})
@State locationInfo:geoLocationManager.ReverseGeoCodeRequest|null=null
aboutToAppear(): void {
try {
let locationEnabled = geoLocationManager.isLocationEnabled();
if (locationEnabled) {
this.addressSetting=true
bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
atManager.checkAccessToken(data.appInfo.accessTokenId, 'ohos.permission.LOCATION').then((status: abilityAccessCtrl.GrantStatus) => {
if (status==0) {
this.addressSetting=true
this.locationKey=true
this.reqPermissionsFromUser(permissions);
}
}).catch((err: BusinessError) => {
console.error(`checkAccessToken fail, err->${JSON.stringify(err)}`);
});
}).catch((err: BusinessError) => {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed. Cause: %{public}s', err.message);
});
}else {
this.addressSetting=false
}
} catch (err) {
console.error("errCode:" + err.code + ", message:" + err.message);
}
}
build() {
if (this.flag){
Column() {
Stack({alignContent:Alignment.Bottom}){
Column(){
MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');
}
.layoutWeight(1)
if (this.addressSetting&&!this.locationKey){
Row(){
Text()
.width(40)
Text("定位未开启")
.fontColor(Color.Black)
Text("开启定位")
.fontColor(Color.White)
.backgroundColor(Color.Pink)
.borderRadius(10)
.padding(10)
.onClick(()=>{
this.reqPermissionsFromUser(permissions);
this.permissionController.open();
})
}
.padding(10)
.borderRadius(5)
.margin({bottom:30})
.backgroundColor('#33000000')
.justifyContent(FlexAlign.SpaceAround)
.width('90%')
}
}
.backgroundColor(Color.White)
.height('100%')
.width('100%')
}
}
}
reqPermissionsFromUser(permissions: Array
let context = getContext(this) as common.UIAbilityContext;
let atManager = abilityAccessCtrl.createAtManager();
atManager.requestPermissionsFromUser(context, permissions).then((data) => {
let grantStatus: Array
let length: number = grantStatus.length;
for (let i = 0; i < length; i++) {
if (grantStatus[i] === 0) {
this.locationKey=true
this.permissionController.close()
let request: geoLocationManager.SingleLocationRequest = {
'locatingPriority': geoLocationManager.LocatingPriority.PRIORITY_LOCATING_SPEED,
'locatingTimeoutMs': 10000
}
try {
geoLocationManager.getCurrentLocation(request).then((result) => {
console.log('current location: ' + JSON.stringify(result));
let locationInfo:geoLocationManager.ReverseGeoCodeRequest=result;
this.mapOptions = {
position: {
target: {
latitude: locationInfo.latitude,
longitude: locationInfo.longitude
},
zoom: 10
}
};
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
this.mapEventManager = this.mapController.getEventManager();
let callback = () => {
console.info("TAG", `on-mapLoad`);
}
this.mapEventManager.on("mapLoad", callback);
}
};
this.flag=true
})
.catch((error:BusinessError) => {
console.error('promise, getCurrentLocation: error=' + JSON.stringify(error));
});
} catch (err) {
console.error("errCode:" + JSON.stringify(err));
}
} else {
this.locationKey=false
this.permissionController.close()
return;
}
}
}).catch((err:Error) => {
console.error(`requestPermissionsFromUser failed, code is ${err.name}, message is ${err.message}`);
})
}
aboutToDisappear() {
this.permissionController!=undefined// 将dialogController置空
}
onPageShow(): void {
if (this.mapController) {
this.mapController.show();
}
}
onPageHide(): void {
if (this.mapController) {
this.mapController.hide();
}
}
}
```