鸿蒙Flutter实战：20. Flutter集成高德地图，同层渲染

本文以同层渲染为例，介绍如何集成高德地图

完整代码见 Flutter 鸿蒙版 Demo

概述

Dart 侧

核心代码如下，通过 OhosView 来承载原生视图

OhosView(viewType: 'com.shaohushuo.app/customView',onPlatformViewCreated: _onPlatformViewCreated,creationParams: const <String, dynamic>{'initParams': 'hello world'},creationParamsCodec: const StandardMessageCodec(),)

其中 viewType 为自定义的 ohosView 的名称，onPlatformViewCreated 为创建完成回调，creationParams 为创建时传入的参数，creationParamsCodec 为参数编码格式。

ArkTS 侧

这里面我们按照《如何使用PlatformView》中的示例操作，首先需要创建一个显示高德地图的视图，其核心代码如下：

完整文件 AmapWidgetFactory.ets

MapsInitializer.setApiKey("e4147e927a1f63a0acff45cecf9419b5");
MapViewManager.getInstance().registerMapViewCreatedCallback((mapview?: MapView, mapViewName?: string) => {if (!mapview) {return;}let mapView = mapview;mapView.onCreate();mapView.getMapAsync((map) => {let aMap: AMap = map;})
})@Component
struct ButtonComponent {@Prop params: ParamscustomView: AmapWidgetView = this.params.platformView as AmapWidgetViewbuild() {Row() {MapViewComponent().width('100%').height('100%')}}
}

接下来创建一个 AmapWidgetFactory.ets

export class AmapWidgetFactory extends PlatformViewFactory {message: BinaryMessenger;constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {super(createArgsCodes);this.message = message;}public create(context: common.Context, viewId: number, args: Object): PlatformView {return new AmapWidgetView(context, viewId, args, this.message);}
}

最终需要创建一个 AmapWidgetPlugin.ets

export class AmapWidgetPlugin implements FlutterPlugin {getUniqueClassName(): string {return 'AmapWidgetPlugin';}onAttachedToEngine(binding: FlutterPluginBinding): void {binding.getPlatformViewRegistry()?.registerViewFactory('com.shaohushuo.app/customView', new AmapWidgetFactory(binding.getBinaryMessenger(), StandardMessageCodec.INSTANCE));}onDetachedFromEngine(binding: FlutterPluginBinding): void {}
}

插件创建好之后，记得在 EntryAbility 中注册插件

 this.addPlugin(new AmapWidgetPlugin())

需要注意的是，视图ID一定要两侧保持一致，如这里名为 ‘com.shaohushuo.app/customView’，否则无法正常显示

截图

参考资料

• 如何使用PlatformView
• PlatformView同层渲染新方案