本文以同层渲染为例,介绍如何集成高德地图
完整代码见 Flutter 鸿蒙版 Demo
概述
Dart 侧
核心代码如下,通过 OhosView 来承载原生视图
dart
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》中的示例操作,首先需要创建一个显示高德地图的视图,其核心代码如下:
dart
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: Params
customView: AmapWidgetView = this.params.platformView as AmapWidgetView
build() {
Row() {
MapViewComponent().width('100%').height('100%')
}
}
}
接下来创建一个 AmapWidgetFactory.ets
dart
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
dart
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 中注册插件
dart
this.addPlugin(new AmapWidgetPlugin())
需要注意的是,视图ID一定要两侧保持一致,如这里名为 'com.shaohushuo.app/customView',否则无法正常显示
截图
