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. widget转ByteData
不展示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中用到了图片,那么会碰到图片没有被绘制到Marker的问题,此时需要通过precacheImage来预加载图片,从而解…...
no module named cv2 、numpy 、xxx超全解决方案
常规解决方案可见博客: https://blog.csdn.net/ALiLiLiYa/article/details/126988014 案例 上述仍没有解决,可以参考如下进行: 例如:明明文件夹存在下述文件,仍然报错。那么可能缺少环境变量导致。 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、准备一台虚拟机,安装CentOS7 常用的虚拟化软件有两种: VirtualBoxVMware 这里我们使用VirtualBox来安装虚拟机,下载地址:Downloads – Oracle VM VirtualBox 001 点击安装 002 报错:he installer has detected an…...
手动配置 kafka 用户密码,认证方式等的方式
场景 部分场景会指定使用某一kafka 来提高安全性,这里就不得不使用用户密码认证方式等来控制 方法示例 // 手动加载配置信息private Map<String, Object> consumerConfigs() {Map<String, Object> props new HashMap<>();props.put(ConsumerCo…...
机器学习 深度学习 神经网络
神经网络概念: 神经网络是一个由生物神经元组成的网络或电路,或者从现代意义上讲,是一个由人工神经元或节点组成的人工神经网络。因此,一个神经网络要么是由生物神经元组成的生物神经网络,要么是用于解决人工智能&…...
VCG 获取某个顶点的邻接顶点
文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 与之前的思路相同,这里我们利用VCG为我们提供的拓扑结构,获取某个顶点的邻接顶点,这在我们处理网格数据时往往很有用。 二、实现代码 //VCG #include <vcg/complex/algorithms/create/platonic.h> #inclu…...
四川云汇优想教育咨询有限公司电商服务靠谱吗
随着抖音电商的兴起,越来越多的商家开始关注这一领域。四川云汇优想教育咨询有限公司作为一家专注于电商服务的企业,也受到了广泛的关注。那么,四川云汇优想教育咨询有限公司的抖音电商服务靠谱吗?下面我们将从多个方面进行深入剖…...
Spring MVC框架支持RESTful,设计URL时可以使用{自定义名称}的占位符@Get(“/{id:[0-9]+}/delete“)
背景:在开发实践中,如果没有明确的规定URL,可以参考: 传统接口 获取数据列表,固定接口路径:/数据类型的复数 例如:/albums/select RESTful接口 - 根据ID获取某条数据:/数据类型的复数/{id} - 例…...
【GoLang】哪些大公司正在使用Go语言
你见过哪些令你膛目结舌的代码技巧? 文章目录 你见过哪些令你膛目结舌的代码技巧?前言:哪些大公司正在使用Go语言谷歌(Google):脸书(Facebook):亚马逊(Amazon…...
美团外卖商超商品销量数据
美团外卖商超商品月销量 字段名 店铺id 店铺名称 商品id 商品名称 商品分类 规格名 原价 现价 月销 规格属性 描述 商品图片 含商家月销量...
【C++高阶(八)】单例模式特殊类的设计
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:C从入门到精通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学习C 🔝🔝 单例模式 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 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish”)。 现在考虑网格中有障碍物。那么从左上角到右下角…...
【线性代数】两个向量组等价,其中一个向量组线性无关,另一个向量组也是线性无关吗?
一、问题 两个向量组等价,其中一个向量组线性无关,另一个向量组也是线性无关吗? 二、答案 不一定,当两个向量组中的向量个数也相同时,结论才成立.若向量个数不相同,结论不成立. 例如: 向量组一:(1,0),(0,1) 向量组二:(1,0),(0,1),(1,1) 两…...
c语言:指针作为参数传递
探究实参与形参它们相互独立 由于主调函数的变量a,b与被调函数的形参x,y它们相互独立。函数 swap 可以修改变量x,y,但是却无法影响到主调函数中的a,b。 现在利用取地址运算符,分别打印它们的首地址&#x…...
YOLOv5性能评估指标->mAP、Precision、Recall、FPS、Confienc (讲解论文关注的主要指标)
简介 这篇博客,主要给大家讲解我们在训练yolov5时生成的结果文件中各个图片及其中指标的含义,帮助大家更深入的理解,以及我们在评估模型时和发表论文时主要关注的参数有那些。本文通过举例训练过程中的某一时间的结果来帮助大家理解…...
陶建辉在 CIAS 2023 谈“新能源汽车的数字化”
近年,中国的新能源汽车发展迅猛,在全球竞争中表现出色,已经连续 8 年保持全球销量第一。在新兴技术的推动下,新能源汽车的数字化转型也正在加速进行,从汽车制造到能源利用、人机交互,各个环节都在进行数字化…...
PSP - 结构生物学中的机器学习 (NIPS MLSB Workshop 2023.12)
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/135120094 Machine Learning in Structural Biology (机器学习在结构生物学中) 网址:https://www.mlsb.io/ Workshop at the 37th Co…...
某领先的集成电路研发中心:建立跨网交换平台 杜绝数据泄露风险
1、客户介绍 某技术领先的集成电路研发中心,是产学研合作的国家级集成电路研发中心,致力于解决重大共性技术的研发及服务支撑问题。该中心积极探索国际化道路,不断提升国际影响力,与多家国际著名集成电路企业和研发机构建立技术合…...
新手指南:掌握3MF格式实现Blender高效3D打印工作流
新手指南:掌握3MF格式实现Blender高效3D打印工作流 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 副标题:从格式解析到自动化处理的完整应用方案…...
核聚变装置逼近极限时会“漏水“:科学家发现热流平衡决定密度天花板
来源:科学剃刀人类距离可控核聚变又近了一步,但一道隐形天花板始终悬在头顶。当反应堆试图提高燃料密度以获得更多能量时,等离子体总会在某个临界点突然崩溃。这种"密度极限"现象困扰了聚变界四十年。现在,美国麻省理工…...
Llama-3.2V-11B-cot惊艳案例:电影截图角色关系推演与剧情发展预测展示
Llama-3.2V-11B-cot惊艳案例:电影截图角色关系推演与剧情发展预测展示 1. 视觉推理工具简介 Llama-3.2V-11B-cot是基于Meta多模态大模型开发的高性能视觉推理工具,专为双卡4090环境深度优化。该工具不仅修复了视觉权重加载的关键问题,还支持…...
PySceneDetect终极指南:5分钟掌握智能视频场景检测与分割
PySceneDetect终极指南:5分钟掌握智能视频场景检测与分割 【免费下载链接】PySceneDetect :movie_camera: Python and OpenCV-based scene cut/transition detection program & library. 项目地址: https://gitcode.com/gh_mirrors/py/PySceneDetect PyS…...
如何解决3D视频无法在普通设备播放的难题?VR-Reversal让转换更简单
如何解决3D视频无法在普通设备播放的难题?VR-Reversal让转换更简单 【免费下载链接】VR-reversal VR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址: https://gitco…...
ElasticSearch查询集群及设置
Elasticsearch查询集群API示例 查看集群状态及监控 参考资料 https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-health.html https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-nodes-stats.html 查看集群状态 健康状态 curl -XGE…...
80+经典游戏宽屏焕新:WidescreenFixesPack重塑怀旧体验
80经典游戏宽屏焕新:WidescreenFixesPack重塑怀旧体验 【免费下载链接】WidescreenFixesPack Plugins to make or improve widescreen resolutions support in games, add more features and fix bugs. 项目地址: https://gitcode.com/gh_mirrors/wi/WidescreenFi…...
二极管限幅与钳位电路设计原理与应用
基于二极管的限幅与钳位电路设计精解1. 二极管基础特性与工程应用1.1 单向导电特性分析二极管作为半导体器件的基础元件,其核心特性是单向导电性。当正向偏置电压超过导通阈值(硅管约0.7V)时呈现低阻态,反向偏置时则保持高阻态。这…...
如何在Mac上免费本地运行Stable Diffusion:Mochi Diffusion终极指南
如何在Mac上免费本地运行Stable Diffusion:Mochi Diffusion终极指南 【免费下载链接】MochiDiffusion Run Stable Diffusion on Mac natively 项目地址: https://gitcode.com/gh_mirrors/mo/MochiDiffusion 还在寻找能在Mac上完美运行Stable Diffusion的免费…...
2. Linux桌面环境介绍
2. Liunx桌面环境介绍 桌面介绍终端设置 设置终端属性:字体快捷键: 新建终端(ctrlaltN)新建标签(ctrlaltT)背景和锁屏设置语言和输入法设置课后作业 系统开机、关机账户的注销、锁屏打开常用程序࿰…...
