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

发表于 更新于

前言

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

整体方案

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

Dart 侧

1
2
3
4
5
static Future<dynamic> redirectNative(String url) {
  return _methodChannel.invokeMethod("redirectNative", {
    "url": url,
  });
}

ArkTS 侧

在 ohos/entry/src/main/ets/entryability 创建 OhosPlugin.ets 文件,这里收到到消息后，调用 router.pushUrl 方法跳转到指定页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default class OhosPlugin implements FlutterPlugin {
  ...
  onAttachedToEngine(binding: FlutterPluginBinding): void {
    this.channel.setMethodCallHandler({
      onMethodCall : (call: MethodCall, result: MethodResult) => {
        switch (call.method) {
          case "redirectNative":
            let url = String(call.argument("url"));
            router.pushUrl({ url: url})
            break;
          default:
            result.notImplemented();
            break;
        }
      }
    })
  }
}

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

1
this.addPlugin(new OhosPlugin())

添加原生页面，回到 DevEco，在 pages 目录右键，创建一个空页面, 命名为 Amap

alt text

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

1
2
3
4
5
"dependencies": {
  "@amap/amap_lbs_common": ">=1.1.0",
  "@amap/amap_lbs_map3d": ">=2.1.1",
  ...
}

调用高德地图SDK，显示地图组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager, } from '@amap/amap_lbs_map3d';
// 配置 API KEY
MapsInitializer.setApiKey("xxx");
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%')
    }
  }
}

调用

1
PlartformCall.redirectNative('pages/Amap');

注意事项

如果在运行时，遇到以下错误, 根据官方提醒， 需要配置 useNormalizedOHMUrl

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "app": {
    "products": [
      {
         "buildOption": {
           "strictMode": {
            "useNormalizedOHMUrl": true
           }
         }
      }
    ]
  }
}

截图

alt text

源码

https://gitee.com/zacks/flutter-ohos-demo

参考资料