鸿蒙Flutter实战:19-Flutter集成高德地图,跳转页面方式

前言

在之前的文章现有Flutter项目支持鸿蒙II中,介绍了如何使用第三方插件,同时给出了非常多的使用案例,如

flutter_inappwebview,video_player, image_picker 等,本文将开始介绍如何集成高德地图。

整体方案

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

Dart 侧

dart 复制代码
  static Future<dynamic> redirectNative(String url) {
    return _methodChannel.invokeMethod("redirectNative", {
      "url": url,
    });
  }

ArkTS 侧

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

ts 复制代码
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;
        }
      }
    })
  }
}

插件写好后,需要在 EntryAbility 中注册:

ts 复制代码
this.addPlugin(new OhosPlugin())

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

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

json 复制代码
  "dependencies": {
    "@amap/amap_lbs_common": ">=1.1.0",
    "@amap/amap_lbs_map3d": ">=2.1.1",
    ...
  }

调用高德地图SDK,显示地图组件:

ts 复制代码
import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager, } from '@amap/amap_lbs_map3d';
// 配置 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%')
    }
  }
}

调用

dart 复制代码
PlartformCall.redirectNative('pages/Amap');

注意事项

如果在运行时,遇到以下错误, 根据官方提醒, 需要配置 useNormalizedOHMUrl

复制代码
 ERROR: Bytecode HARs: [@amap/amap_lbs_map3d, @amap/amap_lbs_common] not supported when useNormalizedOHMUrl is not true.

打开文件 /ohos/build-profile.json5, 添加以下配置

json 复制代码
 		{
 		  "app": {
 		    "products": [
 		      {
 		         "buildOption": {
 		           "strictMode": {
		             "useNormalizedOHMUrl": true
 		           }
 		         }
 		      }
 		    ]
 		  }
 		}

截图

源码

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

参考资料

相关推荐
zhanshuo2 小时前
干掉复杂逻辑!手把手教你在鸿蒙系统中创建稳定的后台服务
harmonyos
zhanshuo2 小时前
鸿蒙系统通知开发全攻略:实现跳转、自动消失、消息提醒的完整教程
harmonyos
问道飞鱼2 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰3 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦4 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
Cao_Shixin攻城狮6 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
迷曳13 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
人生游戏牛马NPC1号14 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
呆呆的小鳄鱼17 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
YueYaTech17 小时前
【Flutter 必备插件】屏幕适配方案 flutter_screenutil
flutter