《仿盒马》app开发技术分享-- 原生地图展示（26）

技术栈

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<Permissions> = ['ohos.permission.APPROXIMATELY_LOCATION','ohos.permission.LOCATION'];
let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;
@Entry
@Component
struct PushAddressPage {

  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  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<Permissions>): void {
    let context = getContext(this) as common.UIAbilityContext;
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(context, permissions).then((data) => {
      let grantStatus: Array<number> = data.authResults;
      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();
    }
  }


}