HarmonyOS开发中地图显示不完全问题？

Question

缩小地图后屏幕可视区域外地图显示空白？

Answer 1

你可以参考以下demo：

import { map, mapCommon, MapComponent } from '@kit.MapKit'; 
import { AsyncCallback } from '@kit.BasicServicesKit'; 
import { Permissions } from '@kit.AbilityKit'; 
import PermissionsUtil from '../../utils/PermissionsUtil'; 
@Entry 
@Component 
struct HuaweiMapDemo { 
  //定位能力所需要的权限 
  private permissions: Array<Permissions> = ['ohos.permission.LOCATION','ohos.permission.APPROXIMATELY_LOCATION']; 
  //定义TAG 
  private TAG = 'HuaweiMapDemo'; 
  //定义参数mapOption,设置地图中心点坐标以及层级。 
  private mapOption?: mapCommon.MapOptions; 
  //定义参数callback,通过callback回调的方式获取MapComponentController对象，用来操作地图。 
  private callback?: AsyncCallback<map.MapComponentController> 
  //地定义地图参数mapController，获取地图的控制器类，用来操作地图 
  private mapController?: map.MapComponentController; 
  aboutToAppear(): void { 
    PermissionsUtil.checkPermissions(this.permissions) 
    // 地图初始化参数，设置地图中心坐标以及层级 
    this.mapOption = { 
      position: { 
        target: { 
          latitude:39.9, 
          longitude:116.4 
        }, 
        zoom: 10 
      }, 
      myLocationControlsEnabled: true, 
      scaleControlsEnabled: true, 
    }; 
    // 地图初始化的回调 
    this.callback = async (err, mapController) => { 
      if(!err) { 
        //获取地图的控制器类，用来操作地图 
        this.mapController = mapController; 
        //开启3d建筑图层 
        let cameraUpdate = map.zoomTo(18); 
        this.mapController.moveCamera(cameraUpdate); 
        this.mapController.setBuildingEnabled(true); 
      } 
    } 
  } 
  build() { 
    Stack() { 
      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback}).width('100%').height('100%'); 
    }.height('100%') 
  } 
} 
 
//PermissionsUtil 
import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
class PermissionsUtil { 
  async checkPermissions(permissions: Array<Permissions>): Promise<void> { 
    let applyResult: boolean = false; 
    for (let permission of permissions) { 
      let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission); 
      if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) { 
        applyResult = true; 
      } else { 
        applyResult = false; 
      } 
    } 
    if (!applyResult) { 
      this.requestPermissions(permissions); 
    } 
  } 
  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; 
    try { 
      let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION); 
      let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo; 
      tokenId = appInfo.accessTokenId; 
    } catch (error) { 
      let err: BusinessError = error as BusinessError; 
      console.error(`Failed to get bundle info for self. Code is ${err.code}, message is ${err.message}`); 
    } 
    // 校验应用是否被授予权限 
    try { 
      grantStatus = await atManager.checkAccessToken(tokenId, permission); 
    } catch (error) { 
      let err: BusinessError = error as BusinessError; 
      console.error(`Failed to check access token. Code is ${err.code}, message is ${err.message}`); 
    } 
    return grantStatus; 
  } 
 
  requestPermissions(permissions: Array<Permissions>): void { 
    let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager(); 
    atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext,