当前位置: 首页 > news >正文

flutter自定义地图Marker完美展示图片

世人都说雪景美

寒风冻脚无人疼

只道是一身正气

结论

参考Flutter集成高德地图并添加自定义Maker先实现自定义Marker。如果自定义Marker中用到了图片,那么会碰到图片没有被绘制到Marker的问题,此时需要通过precacheImage来预加载图片,从而解决此问题。

一、 背景

在高德地图上需要展示每一辆单车的电量。而amap_flutter_map确没有提供自定义Marker的方法,只有一个static BitmapDescriptor *fromBytes*(Uint8List byteData). 所以需要将定制的Widget转为图片,然后图片转为字节流,来实现自定义Marker

二、 自定义Marker

1. 定义widget

创建业务需求的widget,如下:

static Future<Widget> _createMarkerView(BuildContext context, String name,String imageName,{bool selected = false, MarkerTitleType markerTitleType = MarkerTitleType.small}) async {var height = markerTitleType.height;if (selected) {height *= 2;}var width = markerTitleType.width;return Container(height: height,constraints: BoxConstraints(minWidth: width),alignment: Alignment.center,decoration: BoxDecoration(image: DecorationImage(image: AssetImage(imageName)),),child: Directionality(textDirection: TextDirection.ltr,child: Text(name,style: TextStyle(fontSize: selected ? 22 : 14, color: Colors.white),maxLines: 1,overflow: TextOverflow.ellipsis,textAlign: TextAlign.center,),),);}

很简单的一个背景图片和一个标题。其中这个图片,因为是从Images资源中加载,会偶现加载失败的问题。

展示失败

2. widgetByteData

不展示widget到窗口,直接将widget保存为图片。代码如下:

  static Future<ByteData?> widgetToByteData(Widget widget, String imageName,{Alignment alignment = Alignment.center,Size size = const Size(double.maxFinite, double.maxFinite),double devicePixelRatio = 1.0,double pixelRatio = 1.0,required BuildContext context}) async {RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();RenderView renderView = RenderView(child: RenderPositionedBox(alignment: alignment, child: repaintBoundary),configuration: ViewConfiguration(size: size,devicePixelRatio: devicePixelRatio,),view: View.of(context),);PipelineOwner pipelineOwner = PipelineOwner();pipelineOwner.rootNode = renderView;renderView.prepareInitialFrame();BuildOwner buildOwner = BuildOwner(focusManager: FocusManager());RenderObjectToWidgetElement rootElement = RenderObjectToWidgetAdapter(container: repaintBoundary,child: widget,).attachToRenderTree(buildOwner);await precacheImage(AssetImage(imageName), rootElement);buildOwner.buildScope(rootElement);buildOwner.finalizeTree();pipelineOwner.flushLayout();pipelineOwner.flushCompositingBits();pipelineOwner.flushPaint();ui.Image image = await repaintBoundary.toImage(pixelRatio: pixelRatio);ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);return byteData;}

其中的 await precacheImage(AssetImage(imageName), rootElement); 是解决图片偶现加载失败的关键。

3. 返回BitmapDescriptor

创建Marker的时候需要一个BitmapDescriptor,代码如下:

var data = await MapConverting.widgetToByteData(view, imageName,context: context,devicePixelRatio: AMapUtil.devicePixelRatio,pixelRatio: AMapUtil.devicePixelRatio,size: Size(selected ? width * 1.5 : width, selected ? height * 1.2 : height));var uInt8List = data?.buffer.asUint8List();if (null != uInt8List) {bitmapDescriptor = BitmapDescriptor.fromBytes(uInt8List);_createdBitmapDescriptor[key] = bitmapDescriptor;} else {bitmapDescriptor = await BitmapDescriptor.fromAssetImage(imageConfiguration, MyImages.imagesIcParkingNormal);}return bitmapDescriptor;

为了方便BitmapDescriptor的管理,可以创建一个BitmapDescriptorFactory类,添加一个static final Map<String, BitmapDescriptor> *_createdBitmapDescriptor* = {};将创建过的自定义BitmapDescriptorFactory做一个全局缓存,来解决重复创建的问题。

三、precacheImage使用注意

precacheImage函数中有一个参数是context,理解为缓存图片仅仅是在此context中生效。

尝试过在首页,业务主页,地图页面对需要使用到的图片进行缓存,都失效了,只有在RenderObjectToWidgetElement创建自定义widget时,将precacheImage缓存,才能生效。

参考: Flutter集成高德地图并添加自定义Maker

相关文章:

flutter自定义地图Marker完美展示图片

世人都说雪景美 寒风冻脚无人疼 只道是一身正气 结论 参考Flutter集成高德地图并添加自定义Maker先实现自定义Marker。如果自定义Marker中用到了图片&#xff0c;那么会碰到图片没有被绘制到Marker的问题&#xff0c;此时需要通过precacheImage来预加载图片&#xff0c;从而解…...

no module named cv2 、numpy 、xxx超全解决方案

常规解决方案可见博客&#xff1a; https://blog.csdn.net/ALiLiLiYa/article/details/126988014 案例 上述仍没有解决&#xff0c;可以参考如下进行&#xff1a; 例如&#xff1a;明明文件夹存在下述文件&#xff0c;仍然报错。那么可能缺少环境变量导致。 No module named …...

BSWM 模式管理(二)ESH

BSWM 模式管理 ESH 1 ECU State Handling (ESH)2 BSWM ESH 五大模式与六大通用状态机3 状态机对应的切换条件 conditions or rules4 默认主要的 ACTION 或者 ACTION LIST1 ECU State Handling (ESH) 与 ECUM 相关,整个 ECU 状态管理的状态机制 2 BSWM ESH 五大模式与六大通…...

mac电脑安装虚拟机教程

1、准备一台虚拟机&#xff0c;安装CentOS7 常用的虚拟化软件有两种&#xff1a; VirtualBoxVMware 这里我们使用VirtualBox来安装虚拟机&#xff0c;下载地址&#xff1a;Downloads – Oracle VM VirtualBox 001 点击安装 002 报错&#xff1a;he installer has detected an…...

手动配置 kafka 用户密码,认证方式等的方式

场景 部分场景会指定使用某一kafka 来提高安全性&#xff0c;这里就不得不使用用户密码认证方式等来控制 方法示例 // 手动加载配置信息private Map<String, Object> consumerConfigs() {Map<String, Object> props new HashMap<>();props.put(ConsumerCo…...

机器学习 深度学习 神经网络

神经网络概念&#xff1a; 神经网络是一个由生物神经元组成的网络或电路&#xff0c;或者从现代意义上讲&#xff0c;是一个由人工神经元或节点组成的人工神经网络。因此&#xff0c;一个神经网络要么是由生物神经元组成的生物神经网络&#xff0c;要么是用于解决人工智能&…...

VCG 获取某个顶点的邻接顶点

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 与之前的思路相同,这里我们利用VCG为我们提供的拓扑结构,获取某个顶点的邻接顶点,这在我们处理网格数据时往往很有用。 二、实现代码 //VCG #include <vcg/complex/algorithms/create/platonic.h> #inclu…...

四川云汇优想教育咨询有限公司电商服务靠谱吗

随着抖音电商的兴起&#xff0c;越来越多的商家开始关注这一领域。四川云汇优想教育咨询有限公司作为一家专注于电商服务的企业&#xff0c;也受到了广泛的关注。那么&#xff0c;四川云汇优想教育咨询有限公司的抖音电商服务靠谱吗&#xff1f;下面我们将从多个方面进行深入剖…...

Spring MVC框架支持RESTful,设计URL时可以使用{自定义名称}的占位符@Get(“/{id:[0-9]+}/delete“)

背景&#xff1a;在开发实践中&#xff0c;如果没有明确的规定URL&#xff0c;可以参考&#xff1a; 传统接口 获取数据列表,固定接口路径&#xff1a;/数据类型的复数 例如&#xff1a;/albums/select RESTful接口 - 根据ID获取某条数据&#xff1a;/数据类型的复数/{id} - 例…...

【GoLang】哪些大公司正在使用Go语言

你见过哪些令你膛目结舌的代码技巧&#xff1f; 文章目录 你见过哪些令你膛目结舌的代码技巧&#xff1f;前言&#xff1a;哪些大公司正在使用Go语言谷歌&#xff08;Google&#xff09;&#xff1a;脸书&#xff08;Facebook&#xff09;&#xff1a;亚马逊&#xff08;Amazon…...

美团外卖商超商品销量数据

美团外卖商超商品月销量 字段名 店铺id 店铺名称 商品id 商品名称 商品分类 规格名 原价 现价 月销 规格属性 描述 商品图片 含商家月销量...

【C++高阶(八)】单例模式特殊类的设计

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; 单例模式 1. 前言2. 设计一个不能被拷贝/继承的…...

Linux之进程(五)(进程控制)

目录 一、进程创建 1、fork函数创建进程 2、fork函数的返回值 3、fork常规用法 4、fork调用失败的原因 二、进程终止 1、进程终止的方式 2、进程退出码 3、进程的退出方法 三、进程等待 1、进程等待的必要性 2、wait函数 3、waitpid函数 四、进程程序替换 1、概念…...

63. 不同路径 II 23.12.21(二)

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到右下角…...

【线性代数】两个向量组等价,其中一个向量组线性无关,另一个向量组也是线性无关吗?

一、问题 两个向量组等价,其中一个向量组线性无关,另一个向量组也是线性无关吗? 二、答案 不一定,当两个向量组中的向量个数也相同时,结论才成立.若向量个数不相同,结论不成立. 例如&#xff1a; 向量组一&#xff1a;(1,0),(0,1) 向量组二&#xff1a;(1,0),(0,1),(1,1) 两…...

c语言:指针作为参数传递

探究实参与形参它们相互独立 由于主调函数的变量a&#xff0c;b与被调函数的形参x&#xff0c;y它们相互独立。函数 swap 可以修改变量x&#xff0c;y&#xff0c;但是却无法影响到主调函数中的a&#xff0c;b。 现在利用取地址运算符&#xff0c;分别打印它们的首地址&#x…...

YOLOv5性能评估指标->mAP、Precision、Recall、FPS、Confienc (讲解论文关注的主要指标)

简介 这篇博客&#xff0c;主要给大家讲解我们在训练yolov5时生成的结果文件中各个图片及其中指标的含义&#xff0c;帮助大家更深入的理解&#xff0c;以及我们在评估模型时和发表论文时主要关注的参数有那些。本文通过举例训练过程中的某一时间的结果来帮助大家理解&#xf…...

陶建辉在 CIAS 2023 谈“新能源汽车的数字化”

近年&#xff0c;中国的新能源汽车发展迅猛&#xff0c;在全球竞争中表现出色&#xff0c;已经连续 8 年保持全球销量第一。在新兴技术的推动下&#xff0c;新能源汽车的数字化转型也正在加速进行&#xff0c;从汽车制造到能源利用、人机交互&#xff0c;各个环节都在进行数字化…...

PSP - 结构生物学中的机器学习 (NIPS MLSB Workshop 2023.12)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135120094 Machine Learning in Structural Biology (机器学习在结构生物学中) 网址&#xff1a;https://www.mlsb.io/ Workshop at the 37th Co…...

某领先的集成电路研发中心:建立跨网交换平台 杜绝数据泄露风险

1、客户介绍 某技术领先的集成电路研发中心&#xff0c;是产学研合作的国家级集成电路研发中心&#xff0c;致力于解决重大共性技术的研发及服务支撑问题。该中心积极探索国际化道路&#xff0c;不断提升国际影响力&#xff0c;与多家国际著名集成电路企业和研发机构建立技术合…...

打造手游PC级操控:QtScrcpy键鼠映射完全指南

打造手游PC级操控&#xff1a;QtScrcpy键鼠映射完全指南 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy 手机…...

【Python多解释器隔离终极指南】:20年CTO亲授GIL绕过术、内存隔离与并发安全实战(附可运行代码库)

第一章&#xff1a;Python多解释器隔离的核心概念与演进脉络Python长期以来以全局解释器锁&#xff08;GIL&#xff09;为标志性设计&#xff0c;单进程内仅能存在一个活跃的CPython解释器状态&#xff08;PyInterpreterState&#xff09;&#xff0c;这使得“多解释器”长期处…...

RT-Thread Nano 3.0.3移植STM32F103后,第一个实战:用FinSH组件实现串口命令行调试

RT-Thread Nano 3.0.3移植STM32F103实战&#xff1a;FinSH组件实现串口命令行调试 当你成功将RT-Thread Nano移植到STM32F103开发板后&#xff0c;第一个令人兴奋的里程碑就是让系统真正"活"起来——而FinSH组件正是实现这一目标的完美起点。这个内置的命令行交互工具…...

从XMind到禅道:定制化脚本实现测试用例高效导入

1. 为什么需要从XMind导入测试用例到禅道&#xff1f; 在日常测试工作中&#xff0c;XMind思维导图因其直观的结构和高效的编辑方式&#xff0c;成为很多测试工程师编写测试用例的首选工具。我自己也深有体会&#xff0c;用XMind梳理测试点特别顺手&#xff0c;一个下午就能完成…...

构建大规模数据导入系统:技术选型与工程实践

在现代数据密集型应用中&#xff0c;将海量数据高效、可靠地导入目标存储系统是一项基础但极具挑战的任务。表面上看&#xff0c;“写入数据库”只是一个简单的操作&#xff1b;然而&#xff0c;当数据规模达到TB级、业务逻辑涉及合并去重、系统架构包含多个存储引擎时&#xf…...

Nunchaku FLUX.1-dev 结合Transformer架构:提升图像生成一致性与细节

Nunchaku FLUX.1-dev 结合Transformer架构&#xff1a;提升图像生成一致性与细节 最近在尝试各种文生图模型时&#xff0c;我发现了一个挺有意思的现象&#xff1a;很多模型在处理简单描述时表现不错&#xff0c;但一旦遇到包含多个对象、复杂关系或者长段描述的提示词&#x…...

macOS高效录屏工具实战指南:从入门到专业的QuickRecorder应用技巧

macOS高效录屏工具实战指南&#xff1a;从入门到专业的QuickRecorder应用技巧 【免费下载链接】QuickRecorder A lightweight screen recorder based on ScreenCapture Kit for macOS / 基于 ScreenCapture Kit 的轻量化多功能 macOS 录屏工具 项目地址: https://gitcode.com…...

CTFHub | 解密MySQL、Redis、MongoDB流量中的隐藏Flag

1. 数据库流量分析入门&#xff1a;为什么需要Wireshark&#xff1f; 当你参加CTF比赛时&#xff0c;经常会遇到需要从数据库流量中寻找Flag的题目。这类题目通常会给你一个抓包文件&#xff08;pcap格式&#xff09;&#xff0c;里面记录了MySQL、Redis或MongoDB等数据库的网络…...

OpenClaw+nanobot技能开发:从零编写自定义文件处理器

OpenClawnanobot技能开发&#xff1a;从零编写自定义文件处理器 1. 为什么需要自定义文件处理技能 上周我整理项目文档时&#xff0c;遇到了一个典型问题&#xff1a;需要将数百个Markdown文件按照"日期-标题"格式批量重命名。手动操作不仅耗时&#xff0c;还容易出…...

矩阵按键的硬件设计与软件扫描实战

1. 矩阵按键的硬件设计要点 第一次接触矩阵按键时&#xff0c;我完全被它节省IO口的设计惊艳到了。想象一下&#xff0c;16个独立按键原本需要16个IO口&#xff0c;而4x4矩阵按键只需要8个IO口就能搞定。这种设计在资源受限的单片机项目中简直就是救命稻草。 硬件连接上有个容易…...