HarmonyOS NEXT 适配高德地图FlutterSDK实现地图展示，添加覆盖物和移动Camera

HarmonyOS NEXT 适配高德地图 Flutter SDK 实现地图展示，添加覆盖物和移动 Camera

在现代移动应用开发中，地图功能是许多应用的核心组成部分之一。HarmonyOS NEXT 提供了强大的跨平台开发能力，而高德地图 Flutter SDK 则为开发者提供了丰富的地图功能。因为高德地图FlutterSDK已停止维护，并且也没有鸿蒙测的适配库，所以才有了下面的内容，本文将详细介绍如何在 HarmonyOS NEXT 中适配高德地图 Flutter SDK，实现地图展示、添加覆盖物和移动 Camera 的功能。

一、技术亮点

1.1 Flutter 的优势

  • 高效的构建效率：Flutter 的热重载特性允许开发者即时预览代码更改的影响，极大地提高了开发效率。
  • 跨平台兼容性：Flutter 应用可以在 Android、iOS 和 Web 等多个平台上运行，无需为每个平台单独开发，从而节省了开发成本。
  • 丰富的组件库：Flutter 提供了丰富的组件库，如按钮、文本框、列表等，帮助开发者轻松创建出色的用户界面。

1.2 高德地图 Flutter SDK 的优势

高德地图 Flutter SDK 提供了强大的地图功能，包括地图展示、覆盖物添加和 Camera 操作等。通过与 Flutter 的结合，开发者可以轻松实现地图相关的功能。

二、集成高德地图 SDK

首先我们的基础是要先集成高德地图的FlutterSDK

amap_flutter_map: ^3.0.0

2.1 获取 SDK

首先，你需要在高德开放平台注册并获取 SDK。别忘了申请你的高德SDK的key，具体可以参考高德地图的官网文档

2.2 从ohpm仓库获取高德地图包

 "dependencies": {"@amap/amap_lbs_common": ">=1.2.0","@amap/amap_lbs_map3d": ">=2.2.0"
}

2.3 声明权限,工程的oh-package.json5文件中添加依赖

在 module.json5 中添加必要的权限和模块声明。

{
..."requestPermissions": [{"name": 'ohos.permission.INTERNET',}
]
...

三、地图展示

3.1 接下来进入正题，既然是适配高德FlutterSDK,那肯定需要我们在鸿蒙端做一些重要工作

首先我们需要创建一个AMapView这个类的作用是接收Dart测过来的消息

/*** @FileName : AMapView* @Author : kirk.wang* @Time : 2025/5/7 17:19* @Description :*/
import { BinaryMessenger, MethodCall, MethodCallHandler, MethodChannel,MethodResult,StandardMethodCodec } from "@ohos/flutter_ohos";
import PlatformView, { Params } from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView'import { common } from "@kit.AbilityKit";
import { AMapBuilder } from "./AMapComponent";export class AMapView extends PlatformView implements MethodCallHandler {methodChannel: MethodChannel;args?: ESObject;constructor(context: common.Context, viewId: number , args: ESObject, message: BinaryMessenger) {super();this.args = argsthis.methodChannel = new MethodChannel(message, `amap_flutter_map_${viewId}`, StandardMethodCodec.INSTANCE);this.methodChannel.setMethodCallHandler(this);}onMethodCall(call: MethodCall, result: MethodResult): void {// 接受Dart侧发来的消息let method: string = call.method;let link1: SubscribedAbstractProperty<number> = AppStorage.link('numValue');switch (method) {case 'getMessageFromFlutterView':let value: ESObject = call.args;link1.set(value)console.log("nodeController receive message from dart: ");result.success(true);break;}}getView(): WrappedBuilder<[Params]> {return new WrappedBuilder(AMapBuilder);}public sendMessage = () => {console.log("nodeController sendMessage")//向Dart侧发送消息this.methodChannel.invokeMethod('getMessageFromOhosView', 'natvie - ');}dispose(): void {}}

3.2 这个AMapView在什么时候用呢，创建一个AMapPlatformViewFactory类继承自 PlatformViewFactory，用于创建和管理地图相关的原生视图（PlatformView）

import { Any, BinaryMessenger, MessageCodec, PlatformView, PlatformViewFactory } from "@ohos/flutter_ohos";
import { common } from "@kit.AbilityKit";
import { AMapView } from "./AMapView";export default class AMapPlatformViewFactory extends PlatformViewFactory {message: BinaryMessenger;constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {super(createArgsCodes)this.message = message;}public create(context: common.Context, viewId: number, args: Any): PlatformView {return new AMapView(context, viewId, args, this.message);}}

3.3 创建地图插件，注册工厂类

/*** @FileName : AMapFlutterMapPlugin* @Author : kirk.wang* @Time : 2025/5/8 10:15* @Description : 高德地图插件*/
import {Any,BasicMessageChannel, FlutterPlugin, FlutterPluginBinding,MethodChannel,StandardMessageCodec} from "@ohos/flutter_ohos";
import AMapPlatformViewFactory from "./AMapPlatformViewFactory";export default class AMapFlutterMapPlugin implements FlutterPlugin {onDetachedFromEngine(binding: FlutterPluginBinding): void {this.channel?.setMethodCallHandler(null)}private channel?:MethodChannel;private basicChannel?: BasicMessageChannel<Any>;private VIEW_TYPE : string = "com.amap.flutter.map";getUniqueClassName(): string {return "AMapFlutterMapPlugin"}onAttachedToEngine(binding: FlutterPluginBinding): void {binding.getPlatformViewRegistry().registerViewFactory(this.VIEW_TYPE, new AMapPlatformViewFactory(binding.getBinaryMessenger(),StandardMessageCodec.INSTANCE))}
}

3.3 创建地图主视图，然后根据传递的数据设置鸿蒙端的高德原生地图，在AMapView里有一个getView，就是返回的下面的视图代码

/*** @FileName : AMapComponent* @Author : kirk.wang* @Time : 2025/5/8 14:20* @Description : 地图主视图*/
import {AMap,BitmapDescriptorFactory,CameraUpdateFactory,LatLng,MapsInitializer,MapView,MapViewComponent,MapViewManager,MarkerOptions
} from '@amap/amap_lbs_map3d'
import { Params } from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView'
import { AMapView } from './AMapView'
import { ArrayList, HashMap, List } from '@kit.ArkTS';
import image from '@ohos.multimedia.image';
import json from '@ohos.util.json';const key = "你在高德地图申请的鸿蒙端的key";@Component
struct AMapComponent {@Prop params: ParamscustomView: AMapView = this.params.platformView as AMapView@StorageLink('numValue') storageLink: string = "first"@State bkColor: Color = Color.RedaMap?: AMap;aboutToAppear(): void {MapsInitializer.setApiKey(key);MapsInitializer.setDebugMode(true);MapViewManager.getInstance().registerMapViewCreatedCallback((mapview?: MapView, mapViewName?: string) => {if (!mapview) {return;}mapview!.onCreate();mapview!.getMapAsync((map) => {this.aMap = map;})})}build() {Stack() {MapViewComponent({ mapViewName: "harmony_map_demo" }).zIndex(0)}.direction(Direction.Ltr).width('100%').height('100%')}
}@Builder
export function AMapBuilder(params: Params) {AMapComponent({ params: params }).backgroundColor(Color.Yellow)
}

四、添加覆盖物

4.1 根据接收的数据来设置覆盖物，设置地图中心点以及缩放级别

在地图上添加覆盖物时，需要将 Flutter Widget 转换为图片，然后通过原生的 Marker 接口添加到地图上。查看高德Flutter插件可知发送参数的信息，也可以在鸿蒙测断点查看，注意 以下接收数据的key不可更改，否则无法接收到数据，例如：markersToAdd、initialCameraPosition等
Flutter传输的字节数组在鸿蒙端接收有问题，导致这个地方卡了好几天┭┮﹏┭┮

  aboutToAppear(): void {MapsInitializer.setApiKey(key);MapsInitializer.setDebugMode(true);let tempList = this.customView.args?.get("markersToAdd") as List<Map<String, Object>>;let optionsList = new ArrayList<MarkerOptions>()try {tempList.forEach(async (op) => {let options = new MarkerOptions()options.setAlpha(op.get('alpha') as number);let anchor = op.get('anchor') as Array<number>options.setAnchor(anchor[0], anchor[1]);options.setClickable(op.get('clickable') as boolean);options.setDraggable(op.get('draggable') as boolean);options.setInfoWindowEnable(op.get('infoWindowEnable') as boolean);let positionList = op.get('position') as Array<number>if (positionList.length === 2) {options.setPosition(new LatLng(positionList[0], positionList[1]));}options.setZIndex(op.get('zIndex') as number);let icon = op.get('icon') as Array<string | Uint8Array>;if (icon.length >= 2) {try {//因chanel传值导致数据被破坏，无法正确识别Uint8Array参数，所以需要json转换后重新生成Uint8Array//将数据转成JSON字符串let jsonStr = json.stringify(icon[1]);//将JSON字符串格式化成maplet obj = json.parse(jsonStr) as HashMap<string, number>;// 将对象转换为数组const array = Object.keys(obj).map((key): number => obj[key]);if (Array.isArray(array)) {//根据最新的数组生成Uint8Arraylet icon1 = new Uint8Array(array);//拷贝字节数组const buffer1 = icon1.buffer.slice(0);//通过字节数组生成图片let imageSource: image.ImageSource = image.createImageSource(buffer1);let decodingOption: image.DecodingOptions = {editable: true,}imageSource.createPixelMap(decodingOption).then(async (pixelmap: PixelMap) => {//向options添加图片信息options.setIcon(BitmapDescriptorFactory.fromPixelMapSync(pixelmap));//将options添加到数组optionsList.add(options);})}} catch (error) {console.error('Error:', error);}}});} catch (e) {console.log("===============Alpha:error:" + e);}

4.2 将 Flutter Widget 添加到地图

MapViewManager.getInstance().registerMapViewCreatedCallback((mapview?: MapView, mapViewName?: string) => {if (!mapview) {return;}mapview!.onCreate();mapview!.getMapAsync((map) => {this.aMap = map;//向地图添加Markersif (optionsList !== null && optionsList.length > 0) {this.aMap?.addMarkers(optionsList);}})})}

五、设置地图中心点以及缩放级别

5.1 移动 Camera

通过调用地图的 moveCamera 方法，可以移动地图的 Camera。

  aboutToAppear(): void {...MapViewManager.getInstance().registerMapViewCreatedCallback((mapview?: MapView, mapViewName?: string) => {if (!mapview) {return;}mapview!.onCreate();mapview!.getMapAsync((map) => {this.aMap = map;let cameraPosition = this.customView.args?.get("initialCameraPosition") as Map<String, Object>;let targetList = cameraPosition.get('target') as Array<number>//设置地图中心点以及缩放级别this.aMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(targetList[0], targetList[1]),cameraPosition.get('zoom') as number));...})})}

至此鸿蒙端的开发工作至此结束

七、Flutter端处理

找到Flutter端的method_channel_amap_flutter_map.dart，里面有个buildView函数，里面有判断只支持

 @overrideWidget buildView(Map<String, dynamic> creationParams,Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers,void Function(int id) onPlatformViewCreated) {if (defaultTargetPlatform == TargetPlatform.android) {creationParams['debugMode'] = kDebugMode;return AndroidView(viewType: VIEW_TYPE,onPlatformViewCreated: onPlatformViewCreated,gestureRecognizers: gestureRecognizers,creationParams: creationParams,creationParamsCodec: const StandardMessageCodec(),);} else if (defaultTargetPlatform == TargetPlatform.iOS) {return UiKitView(viewType: VIEW_TYPE,onPlatformViewCreated: onPlatformViewCreated,gestureRecognizers: gestureRecognizers,creationParams: creationParams,creationParamsCodec: const StandardMessageCodec(),);} // else if (defaultTargetPlatform == TargetPlatform.ohos) {//   return OhosView(//     viewType: VIEW_TYPE,//     onPlatformViewCreated: onPlatformViewCreated,//     gestureRecognizers: gestureRecognizers,//     creationParams: creationParams,//     creationParamsCodec: const StandardMessageCodec(),//   );// }return Text('当前平台:$defaultTargetPlatform, 不支持使用高德地图插件');}

将我注释掉的代码放开即可！接下来就可以在你的鸿蒙设备上调试了。完全按照我的代码，除了高德的key，其余的都不要随便更改哦，否则可能运行出来有问题

六、总结

通过上述步骤，你可以在 HarmonyOS NEXT 中适配高德地图 Flutter SDK，实现地图展示、添加覆盖物和移动 Camera 的功能。Flutter 的跨平台特性和高德地图的强大功能相结合，为开发者提供了极大的便利。

希望本文能够帮助你在 HarmonyOS NEXT 中成功集成高德地图 Flutter SDK，并实现所需的地图功能。如果你在开发过程中遇到任何问题，可以参考高德地图的官方文档，或在相关社区寻求帮助。

七、参考

  • Flutter中的高德地图适配鸿蒙

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/news/906225.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

三键标准、多键usb鼠标数据格式

三键标准、多键usb鼠标数据格式

三键标准usb鼠标数据格式 滚轮上滚 滚轮下滚 鼠标快速上移 鼠标快速右移 鼠标快速左移 鼠标右键单击_抬起 鼠标中键单击_抬起 鼠标左键单击_抬起 鼠标左键先按_右键再按_同时抬起 鼠标左右键同时按下_同时抬起 鼠标左右键同时按下_右键先抬 多键usb鼠标…
阅读更多...
软件架构风格系列（7）：闭环控制架构

软件架构风格系列（7）：闭环控制架构

文章目录 引言一、闭环控制架构&#xff1a;让系统学会“自我调节”的魔法&#xff08;一&#xff09;从温控系统理解核心原理&#xff08;二&#xff09;核心组件解析 二、架构设计图&#xff1a;闭环控制的“四大核心环节”三、Java实战&#xff1a;手写一个智能温控系统&…
阅读更多...
Python中的组合数据类型

Python中的组合数据类型

一、列表类型 列表是指一系列的按特定顺序排列的元素组成。使用[]定义列表&#xff0c;元素与元素之间使用英文的逗号分隔&#xff0c;列表中的元素可以是任意的数据类型。 #直接使用[]创建 lst[hello,world,99.8,100] print(lst)#可以使用内置的list()函数创建列表 lst2list(h…
阅读更多...
集合进阶2

集合进阶2

Java不可变集合、Stream流与方法引用深度解析 一、不可变集合&#xff08;Immutable Collections&#xff09;进阶指南 1.1 不可变集合核心特性 防御性编程&#xff1a;防止外部修改数据&#xff08;如传递集合给第三方库时&#xff09;线程安全&#xff1a;天然支持多线程读…
阅读更多...
MySQL企业版免费开启,强先体验

MySQL企业版免费开启,强先体验

近期Oracle突然宣布&#xff0c;MySQL企业版面向开发者免费开放下载&#xff0c;这一消息瞬间引爆DBA圈。作为数据库领域的“顶配车型”&#xff0c;企业版长期因高昂授权费让中小团队望而却步&#xff0c;如今免费开放无异于“劳斯莱斯开进菜市场”。 本文将深度拆解企业版的…
阅读更多...
数据要素及征信公司数据要素实践

数据要素及征信公司数据要素实践

数据要素及征信公司数据要素实践 1.数据要素的定义与核心特征2.征信公司应用数据要素的实践路径3.总结1.数据要素的定义与核心特征 数据要素是数字经济时代的新型生产要素，指以电子形式存在、通过计算方式参与生产经营活动并创造价值的数据资源。 其核心特征包括： 新型生产…
阅读更多...
Golang 范型

Golang 范型

引言 Go 从 1.18 开始正式支持泛型&#xff0c;带来了更强的类型抽象能力&#xff0c;使得我们可以编写更通用、可复用的代码。本文档将介绍下泛型与应用的一些内容 什么是泛型 泛型&#xff08;Generic&#xff09;是一种允许你编写“参数化类型”的编程方式。你可以将类型…
阅读更多...
vue-ganttastic甘特图label标签横向滚动固定方法

vue-ganttastic甘特图label标签横向滚动固定方法

这个甘特图之前插件里&#xff0c;没有找到能固定label标签在屏幕上的办法&#xff0c;用css各种办法都没有实现&#xff0c;所以我我直接手写定位&#xff0c;用js监听滚动条滚动的距离&#xff0c;然后同步移动甘特图label标签&#xff0c;造成一种定位的错觉&#xff0c;以下…
阅读更多...
VS2017编译openssl3.0.8

VS2017编译openssl3.0.8

openssl是一个功能丰富且自包含的开源安全工具箱。它提供的主要功能有：SSL协议实现(包括SSLv2、SSLv3和TLSv1)、大量软算法(对称/非对称/摘要)、大数运算、非对称算法密钥生成、ASN.1编解码库、证书请求(PKCS10)编解码、数字证书编解码、CRL编解码、OCSP协议、数字证书验证、P…
阅读更多...
16【架构进阶】Flask蓝图与应用工厂模式：构建企业级Web应用的核心技巧

16【架构进阶】Flask蓝图与应用工厂模式：构建企业级Web应用的核心技巧

【架构进阶】Flask蓝图与应用工厂模式&#xff1a;构建企业级Web应用的核心技巧 前言&#xff1a;为什么应用架构决定项目的天花板&#xff1f; 在Flask开发中&#xff0c;随着项目规模的扩大&#xff0c;如何组织代码结构成为决定项目可维护性和扩展性的关键因素。单文件应用…
阅读更多...
系统架构设计-案例分析总结

系统架构设计-案例分析总结

系统架构设计-案例分析总结 2024年下半年系统架构设计师案例第1题 2022年下半年系统架构设计师案例第1题第2题 2021年下半年系统架构设计师案例第1题第2题 2024年下半年系统架构设计师案例 题&#xff1a;效用树可用性中ping/echo策略和心跳策略比较 第1题 阅读以下关于面向质…
阅读更多...
软件架构风格系列（6）：解释器架构

软件架构风格系列（6）：解释器架构

文章目录 引言一、从计算器到规则引擎&#xff1a;解释器架构的核心本质&#xff08;一&#xff09;什么是解释器架构&#xff1f;&#xff08;二&#xff09;核心组件&#xff1a;构建“语言理解系统”的三驾马车 二、架构设计图&#xff1a;从输入到执行的完整链路三、Java实…
阅读更多...
Serverless 的未来与进阶：持续学习之路

Serverless 的未来与进阶：持续学习之路

Serverless 的未来与进阶&#xff1a;持续学习之路 恭喜你&#xff0c;坚持走到了《轻松入门 Serverless》系列博客的最后一篇&#xff01; 回顾我们的旅程&#xff0c;我们一起&#xff1a; 揭开了 Serverless 的神秘面纱&#xff0c;理解了它的核心思想、关键特征以及 Faa…
阅读更多...
设备数据看板助力自动化工厂实现生产智能精细化管理

设备数据看板助力自动化工厂实现生产智能精细化管理

工厂数字化转型需要实现自动化设备生产现场可视化、设备系统间的互联互通&#xff0c;以及数据的智能决策。然而&#xff0c;当前许多制造企业仍面临着传统单机设备同质化严重、数字化服务能力不足、售后成本高企、系统集成效率低下等挑战。企业如何通过自动化装备看板和实时数…
阅读更多...
pcie phy电气层（PCS）详解gen1、2 （rx）

pcie phy电气层（PCS）详解gen1、2 （rx）

注&#xff1a;推荐大家查看英文原版&#xff0c;笔者大部分内容也为翻译&#xff1b; S IP&#xff1a; 1. pcie供电&#xff1a; Vph&#xff1a; 1.2&#xff0c;1.5&#xff0c; 1.8V high voltage IO supply&#xff1b; Vp/VptxX/Vpdig &#xff1a;analog supply&am…
阅读更多...
Java—— File详解

Java—— File详解

说明 File对象就表示一个路径&#xff0c;可以是文件的路径、也可以是文件夹的路径 这个路径可以是存在的&#xff0c;也允许是不存在的 获取File对象 方法名称说明public File(String pathname)根据文件路径创建文件对象public File(String parent,String child)根据父路径名…
阅读更多...
【数字图像处理】半开卷复习提纲

【数字图像处理】半开卷复习提纲

1&#xff1a;要求 2张A4纸以内&#xff0c;正反面均可写 &#xff08;不过博主由于墨水浸到背面了&#xff0c;采用了把2张单面通过双面胶粘起来的方法&#xff0c;结果考前半个小时都在用这个难用的双面胶。。。&#xff09; 2&#xff1a;提纲内容 3&#xff1a;提示 考的…
阅读更多...
Neovim 如何安装和配置缩进标识插件 indent-blankline.nvim

Neovim 如何安装和配置缩进标识插件 indent-blankline.nvim

Neovim 0.9 以 lazy.nvim 为核心的现代化配置指南 一次性搞定插件管理、UI 优化与高效行跳转 适用平台&#xff1a;Linux&#xff0f;macOS&#xff0f;WSL&#xff0f;Windows (Neovim ≥ 0.9) 目录 为什么选 lazy.nvim安装与初始化 2.1 创建配置目录 2.2 克隆 lazy.nvi…
阅读更多...
VulnHub | Breach - 1

VulnHub | Breach - 1

&#x1f31f; 关注这个靶场的其它相关笔记&#xff1a;[网安靶场] 红队综合渗透靶场 —— VulnHub 靶场笔记合集 Breach: 1 ~ VulnHubBreach: 1, made by mrb3n. Download & walkthrough links are available.https://vulnhub.com/entry/breach-1,152/ 0x01&#xff1a;…
阅读更多...
城市综合管廊监测与维护一体化解决方案

城市综合管廊监测与维护一体化解决方案

一、 方案概述 城市综合管廊监测主要源于现代城市对地下管线管理的迫切需求。随着城市化进程的加快&#xff0c;地下管线作为城市的“生命线”&#xff0c;其重要性日益凸显。传统的地下管线管理方式存在分散、低效、易产生信息孤岛和管理盲区等问题&#xff0c;已无法满足现代…
阅读更多...
最新文章

Copyright @ 2022~2023