Preface
In the previous article Existing Flutter projects support Harmony II, we introduced how to use third-party plug-ins and gave many use cases, such as
flutter_inappwebview, video_player, image_picker, etc. This article will start to introduce how to integrate Amap.
Overall solution
Use MethodChannel for message communication, call native API on the Dart side, and jump to the specified page according to the parameters after receiving the relevant call on the ArkTS side
Dart side
static Future<dynamic> redirectNative(String url) {
return _methodChannel.invokeMethod("redirectNative", {
"url": url,
});
}
ArkTS side
Create the OhosPlugin.ets file in ohos/entry/src/main/ets/entryability. After receiving the message, call the router.pushUrl method to jump to the specified page
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;
}
}
})
}
}
After the plugin is written, it needs to be registered in EntryAbility:
this.addPlugin(new OhosPlugin())
Add a native page, return to DevEco, right-click in the pages directory, create an empty page, and name it Amap
Introduce Amap SDK in the ohos/entry/oh-package.json file:
"dependencies": {
"@amap/amap_lbs_common": ">=1.1.0",
"@amap/amap_lbs_map3d": ">=2.1.1",
...
}
Call Amap SDK to display the map component:
import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager, } from '@amap/amap_lbs_map3d';
// Configure 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%')
}
}
}
Call
PlartformCall.redirectNative('pages/Amap');
Notes
If you encounter the following error at runtime, According to official reminder, useNormalizedOHMUrl needs to be configured
ERROR: Bytecode HARs: [@amap/amap_lbs_map3d, @amap/amap_lbs_common] not supported when useNormalizedOHMUrl is not true.
Open the file /ohos/build-profile.json5, add the following configuration
{
"app": {
"products": [
{
"buildOption": {
"strictMode": {
"useNormalizedOHMUrl": true
}
}
}
]
}
}
Screenshots
Source code
https://gitee.com/zacks/flutter-ohos-demo
References