鸿蒙Flutter实战：19-Flutter集成高德地图，跳转页面方式

原创已于 2026-03-11 17:56:15 修改 · 1.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#harmonyos #flutter #华为

于 2025-03-26 16:53:35 首次发布

鸿蒙 Flutter 实战专栏收录该内容

32 篇文章

订阅专栏

鸿蒙 Flutter 实战：19-MethodChannel 集成高德地图

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

前言

在之前的文章现有 Flutter 项目支持鸿蒙 II 中，介绍了如何使用第三方插件，同时给出了非常多的使用案例，如 flutter_inappwebview，video_player, image_picker 等。本文将介绍如何使用 MethodChannel 集成高德地图。

提示：集成地图功能有两种方式，本文介绍 MethodChannel 方式，下篇将介绍 PlatformView 同层渲染方式。

一、整体方案

1.1 方案概述

通过 MethodChannel 进行消息通信，在 Dart 侧调用原生 API，在 ArkTS 侧收到相关调用后，根据参数跳转到指定页面。

1.2 架构设计

┌─────────────────┐         ┌─────────────────┐
│   Flutter 侧    │         │   鸿蒙 ArkTS 侧   │
│                 │         │                 │
│  redirectNative │ ──────► │  OhosPlugin     │
│      (url)      │  消息    │  router.pushUrl │
│                 │  通信    │      (url)      │
│                 │         │      │          │
│                 │         │      ▼          │
│                 │         │   Amap 页面     │
└─────────────────┘         └─────────────────┘

1.3 实现步骤

步骤	内容	说明
1	Dart 侧定义调用方法	封装 MethodChannel 调用
2	ArkTS 侧实现插件	接收消息并处理
3	注册插件	在 EntryAbility 中注册
4	创建地图页面	编写 ArkTS 地图组件
5	配置 SDK	添加高德地图依赖

二、Dart 侧实现

2.1 定义 MethodChannel

static const MethodChannel _methodChannel = MethodChannel('xxx.com/app');

/// 跳转到原生页面
static Future<dynamic> redirectNative(String url) {
  return _methodChannel.invokeMethod("redirectNative", {
    "url": url,
  });
}

2.2 调用示例

// 跳转到高德地图页面
PlatformCall.redirectNative('pages/Amap');

三、ArkTS 侧实现

3.1 创建插件文件

在 ohos/entry/src/main/ets/entryability 目录创建 OhosPlugin.ets 文件。

3.2 实现插件逻辑

import { FlutterPlugin, FlutterPluginBinding, MethodCall, MethodResult, MethodChannel, StandardMessageCodec } from '@ohos/flutter_ohos';
import router from '@ohos.router';

export default class OhosPlugin implements FlutterPlugin {
  private channel?: MethodChannel;

  getUniqueClassName(): string {
    return "OhosPlugin";
  }

  onAttachedToEngine(binding: FlutterPluginBinding): void {
    this.channel = new MethodChannel(binding.getBinaryMessenger(), "xxx.com/app");
    this.channel.setMethodCallHandler({
      onMethodCall: (call: MethodCall, result: MethodResult) => {
        switch (call.method) {
          case "redirectNative":
            let url = String(call.argument("url"));
            router.pushUrl({ url: url });
            result.success(true);
            break;
          default:
            result.notImplemented();
            break;
        }
      }
    })
  }

  onDetachedFromEngine(binding: FlutterPluginBinding): void {
    this.channel?.setMethodCallHandler(null);
  }
}

这里收到消息后，调用 router.pushUrl 方法跳转到指定页面。

3.3 注册插件

插件写好后，需要在 EntryAbility 中注册：

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '../plugins/GeneratedPluginRegistrant';
import OhosPlugin from './OhosPlugin';

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine);
    GeneratedPluginRegistrant.registerWith(flutterEngine);
    this.addPlugin(new OhosPlugin());
  }
}

四、创建地图页面

4.1 创建空页面

回到 DevEco，在 pages 目录右键，创建一个空页面，命名为 Amap。

创建空页面

在 DevEco 中创建新的页面

4.2 配置 SDK

在 ohos/entry/oh-package.json 文件中引入高德地图 SDK：

{
  "dependencies": {
    "@amap/amap_lbs_common": ">=1.1.0",
    "@amap/amap_lbs_map3d": ">=2.1.1"
  }
}

4.3 实现地图页面

import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager } from '@amap/amap_lbs_map3d';

// 配置 API KEY
MapsInitializer.setApiKey("你的密钥");

MapViewManager.getInstance().registerMapViewCreatedCallback((mapview?: MapView, mapViewName?: string) => {
  if (!mapview) {
    return;
  }
  let mapView = mapview;
  mapView.onCreate();
  mapView.getMapAsync((map) => {
    let aMap: AMap = map;
    // 地图操作
  })
})

@Entry
@Component
struct Index {
  build() {
    Row() {
      MapViewComponent()
        .width('100%')
        .height('100%')
    }
  }
}

五、配置 build-profile.json5

5.1 常见问题

如果在运行时遇到以下错误：

ERROR: Bytecode HARs: [@amap/amap_lbs_map3d, @amap/amap_lbs_common] not supported when useNormalizedOHMUrl is not true.

5.2 解决方案

根据官方说明，需要配置 useNormalizedOHMUrl。

打开文件 /ohos/build-profile.json5, 添加以下配置：

{
  "app": {
    "products": [
      {
        "buildOption": {
          "strictMode": {
            "useNormalizedOHMUrl": true
          }
        }
      }
    ]
  }
}

六、完整调用流程

6.1 流程说明

步骤	操作	说明
1	Dart 调用	`PlatformCall.redirectNative('pages/Amap')`
2	MethodChannel	消息传递到 ArkTS 侧
3	插件处理	OhosPlugin 接收并解析参数
4	路由跳转	router.pushUrl 跳转到地图页面
5	页面显示	MapViewComponent 渲染地图