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

前言

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

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

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

复制代码

ArkTS 侧

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

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

复制代码

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

1. this.addPlugin(new OhosPlugin())

复制代码

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

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

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

复制代码

调用高德地图SDK，表现地图组件：

1. import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager, } from '@amap/amap_lbs_map3d';
2. // 配置 API KEY
3. MapsInitializer.setApiKey("xxx");
4. MapViewManager.getInstance().registerMapViewCreatedCallback((mapview?: MapView, mapViewName?: string) => {
5.   if (!mapview) {
6.     return;
7.   }
8.   let mapView = mapview;
9.   mapView.onCreate();
10.   mapView.getMapAsync((map) => {
11.     let aMap: AMap = map;
12.   })
13. })
15. @Entry
16. @Component
17. struct Index {
18.   build() {
19.     Row() {
20.       MapViewComponent()
21.         .width('100%')
22.         .height('100%')
23.     }
24.   }
25. }

复制代码

调用

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.                   "app": {
3.                     "products": [
4.                       {
5.                          "buildOption": {
6.                            "strictMode": {
7.                              "useNormalizedOHMUrl": true
8.                            }
9.                          }
10.                       }
11.                     ]
12.                   }
13.                 }

复制代码

截图

源码

https://gitee.com/zacks/flutter-ohos-demo
参考资料

• Flutter 鸿蒙版 Demo
  
• 高德地图鸿蒙SDK
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。