HarmonyOS鸿蒙Next中为什么用map教程提供的代码运行出来的地图是倒过来的

HarmonyOS鸿蒙Next中为什么用map教程提供的代码运行出来的地图是倒过来的

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
import { BottomNavigation } from '../components/BottomNavigation';

@Entry
@Component
struct ServicePage {
  private TAG: string = "ServicePage";
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private mapEventManager?: map.MapEventManager;

  aboutToAppear(): void {
    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10,
        tilt: 0,
        bearing: 0,
      },
      myLocationControlsEnabled: true,
      scaleControlsEnabled: true,
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        let callback = () => {
          console.info(this.TAG, `on-mapLoad`);
        }
        this.mapEventManager.on("mapLoad", callback);
        this.mapController.setRotateGesturesEnabled(true);
      } else {
        console.error(`Failed to initialize the map, code is:${err.code}, message is ${err.message}`);
      }
    };
  }

  onPageShow(): void {
    if (this.mapController) {
      this.mapController.show();
    }
  }

  onPageHide(): void {
    if (this.mapController) {
      this.mapController.hide();
    }
  }

  build() {
    Column({ space: 0 }) {
      // 地图内容区域
      Stack() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
          .width('100%')
          .height('100%');
      }
      .layoutWeight(1)
      .width('100%')

      // 底部导航
      BottomNavigation({ currentPage: 'ServicePage' })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffe7dede')
  }
}

图片


更多关于HarmonyOS鸿蒙Next中为什么用map教程提供的代码运行出来的地图是倒过来的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中,地图显示倒置通常是由于坐标系或地图数据源配置问题导致。鸿蒙Next的地图服务基于自有坐标系设计,若使用非官方数据或坐标系未正确转换,可能导致渲染异常。请检查地图初始化参数,确保使用鸿蒙官方地图SDK提供的最新版本,并确认坐标数据符合WGS-84标准。部分第三方教程代码可能未适配鸿蒙Next的坐标系规范,需替换为官方示例代码。

更多关于HarmonyOS鸿蒙Next中为什么用map教程提供的代码运行出来的地图是倒过来的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


地图显示倒置通常与地图的旋转角度(bearing)或设备坐标系有关。从您提供的代码和截图来看,地图的初始 bearing 参数设置为 0,这本身不会导致倒置。

问题可能源于以下两点:

  1. 地图容器的方向MapComponent 被放置在 Stack 容器中,并设置了 width('100%')height('100%')。请检查其父组件 Column 以及整个页面的布局方向(例如,是否应用了全局旋转或特定的 rotate 属性)。如果布局方向被意外旋转(如180度),会导致地图内容整体倒置。

  2. 地图控制器初始化时机:在 aboutToAppear 中初始化地图参数和回调是合理的。但请确保 MapComponent 在构建时能正确获取到 mapOptionsmapCallback。由于 aboutToAppear 在组件首次出现前触发,若地图组件在数据就绪前渲染,可能引发显示异常。

建议检查步骤

  • 暂时移除 Stack 或其他可能影响方向的容器属性,直接使用 MapComponent 测试。
  • 确认页面级或应用级样式未添加旋转变换。
  • 检查 MapComponentmapOptionstilt(倾斜角)是否为非常规值,但您的代码中为 0,应无影响。

如果布局方向无误,可能是地图服务初始渲染时的坐标系适配问题。可尝试在 callback 中地图初始化成功后,显式调用 mapController.setBearing(0) 重置方向。

回到顶部