HarmonyOS 鸿蒙Next MapComponent组件无显示

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next MapComponent组件无显示 MapComponent组件mapOptions里面的position属性写死经纬度 例如39.56,114地图就能显示正常位置,但是一旦使用上个界面传递的数据就显示不正常,打断点看初始化的数据是正常的 请问是怎么回事

import { map, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@ohos.base';
import { JsLocationOpenRequest } from '../../data/JsRequest';

@Preview
@Component
export struct SimpleMapComponent {
  @StorageLink('statusBarHeight') statusBarHeight: number = 0
  @Consume('pageInfos') pageInfos: NavPathStack;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  @State latitude: number = 0
  @State longitude: number = 0
  @State zoom: number = 16

  aboutToAppear(): void {
    let params = this.pageInfos.getParamByName("simpleMap")[0] as JsLocationOpenRequest
    this.latitude = params.latitude
    this.longitude = params.longitude
    this.zoom = params.scale

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类,用来操作地图
        this.mapController = mapController;
        this.mapController.on("mapLoad", () => {
          console.log(`mapLoad: ${this.latitude},${this.longitude}`)
        });
      }
    };
  }

  build() {
    NavDestination() {
      Stack() {
        // 调用MapComponent组件初始化地图
        MapComponent({
          mapOptions: {
            position: {
              target: {
                latitude: this.latitude,
                longitude: this.longitude
              },
              zoom: this.zoom
            }
          }, mapCallback: this.callback
        }).width('100%').height('100%');
      }.height('100%')
    }
    .width('100%')
    .height('100%')
    .title('位置')
    .backgroundColor($r('app.color.white'))
    .margin({ top: px2vp(this.statusBarHeight) })
  }
}

更多关于HarmonyOS 鸿蒙Next MapComponent组件无显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可能aboutToAppear中的数据处理是一个耗时的操作所以晚于渲染,也就是说build()已经开始渲染了,aboutToAppear()的数据还没有拿到,这时候读取的是underfined,就会出现问题。可以尝试使用条件渲染的方式,让数据不为空的时候再渲染,避免build()里面拿到空值,可以参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-ifelse-V5

aboutToAppear:为自定义组件@Component装饰的,且每个自定义组件只能触发一次。这边可以加一个点击事件或者timer事件触发数据刷新。

更多关于HarmonyOS 鸿蒙Next MapComponent组件无显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS(鸿蒙)系统中Next MapComponent组件无显示的问题,可能的原因及解决方法如下:

  1. 组件配置问题:

    • 确认MapComponent已在XML布局文件中正确配置,包括必要的属性如宽度、高度、id等。
    • 检查是否已正确引用Map相关的库和依赖。
  2. 权限问题:

    • 确保应用已获取定位权限及地图服务所需的其他权限。
    • 在config.json中检查并配置必要的权限声明。
  3. 地图服务初始化:

    • 确认在应用中已正确初始化地图服务,包括调用地图服务的启动方法。
    • 检查地图服务的API Key是否有效且已正确配置。
  4. 组件状态管理:

    • 确认MapComponent的可见性状态(如是否在不可见容器中或被其他组件遮挡)。
    • 检查是否有代码逻辑错误导致MapComponent被意外隐藏或销毁。
  5. 版本兼容性问题:

    • 确认使用的鸿蒙系统版本与MapComponent组件库版本兼容。
    • 检查是否有已知的版本问题或BUG,并尝试更新至最新版本。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部