DEV Community

Cover image for HarmonyOS Flutter Practice: 19-Flutter integrates Amap, page jump method
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter Practice: 19-Flutter integrates Amap, page jump method

#harmonyos #flutter

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,
});
}
Enter fullscreen mode Exit fullscreen mode

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;
}
}
})
}
}
Enter fullscreen mode Exit fullscreen mode

After the plugin is written, it needs to be registered in EntryAbility:

this.addPlugin(new OhosPlugin())
Enter fullscreen mode Exit fullscreen mode

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",
...
}
Enter fullscreen mode Exit fullscreen mode

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%')
}
}
}
Enter fullscreen mode Exit fullscreen mode

Call 

PlartformCall.redirectNative('pages/Amap');
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Open the file /ohos/build-profile.json5, add the following configuration

{
"app": {
"products": [
{
"buildOption": {
"strictMode": {
"useNormalizedOHMUrl": true
}
}
}
]
}
}
Enter fullscreen mode Exit fullscreen mode

Screenshots

Source code

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

References

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.