【UniApp踩坑记录】在subNvue页面中使用Map,添加marker后不显示

一、背景

最近将一个小程序项目转化为 APP,想着正好体验一下 uniapp 宣称的一套代码,多端运行理念,于是运行到了真机环境。好消息是运行成功了,坏消息是部分样式不完善,部分功能失效。跨端成功了,但没完全成功。

二、问题描述

小程序项目页面都是用 vue 编写的,在某个页面中需要同时用到 map 和 canvas 组件,项目运行后 canvas 表现正常,但是 map 效果很一般。查询 uniapp 官方文档可知:App端使用 map 推荐使用 nvue,使用 canvas 推荐使用 vue。于是问题的关键就是让 map 用 nvue 编写,然后嵌入 vue 页面。经查询,uniapp 提供了 subNvue 可以解决我的问题。于是我就按照文档进行配置开发,运行后发现 map 上的 marker 不显示,控制台也没报错。
于是开启了 debug 之旅:先是打印了 mapContext,发现其不为 null。然后在 mapContext.addMarkers() 方法中添加 success() 回调和 fail() 回调,并在回调函数中打印日志,根据控制台打印结果来看,执行了 success() 回调,但是参数 res 却为空对象 {}
在我印象中,如果 API 成功执行了, success() 回调的 res 参数会输出为 { errMsg: "ok" }。所以,mapContext.addMarkers() 在 subNvue 中的执行结果为:如成功。
一时间没有了头绪,便开启了 Search 之旅。2000 Years Later, 根据 uniapp官方提供的map组件使用问题 一文中提到:

问题4:map组件的相关JS API使用无效?

这种情况下,通过 uni.createMapContext() 获取到了地图对象,但是使用相关的 API 却无效。我们使用 map 的页面必须是在pages.json 配置,并且可以使用路由跳转的页面,否则就会导致相关的 JS API 使用无效,博主遇到此问题时,是在 subNvue 页面中使用了相关的 JS API。

发现博主和我遇到了一样的问题。通过评论交流后,博主推荐使用 nvue 页面实现相关地图功能。
于是乎,我尝试更换为 nvue 页面。这一次,map 表现正常,但是控制台直接报了 canvas 的错误。经过查询 canvas 组件文档 发现,可以使用 第三方 js 库,然后进行尝试后运行,又双叒叕发现了新问题,控制台报错:

reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!

再次 Search 发现有很多人都遇到了这个问题,甚至官方的人员都不太建议用这个库。 [1] [2] [3]
路再一次被封死了,我真是无语啦~
没办法,只能继续查。中间实在有些破防了,便在官方社区发了个帖子,等待回复的过程中继续查。查啊查啊查,查啊查啊查,终于又查到一个 uniapp nvue map中刚踩到的坑 解决markers和polyline不显示,博主在文章中直言:uniapp 真是个神奇的框架,我看到后直接就笑了,很是赞同。根据文章中的办法,最后解决了我的问题,方法在下面👇。

三、解决方法

map 中绑定的 marker不能是在 data 中的,而是需要在计算属性中返回。

<map id="my-map" :markers="markers"></map>
export default {data() {return {map_markers: []}},computed: {markers() {return this.map_markers}},methods: {test() {// 1. 清除 markerthis.map_markers = []// 2. 显示 markerthis.map_markers = [{id: 1,iconPath: 'xxx',longitude: 120.1234,latitude: 30.5678,width: 12,height: 24}]// 注:this.mapContext.removeMarkers() 和 addMarkers() 调用后无效,markers 不会在 map 上显示}}
}

该方法虽然解决了subNvue页面中地图 marker 显示的问题,但是问题的根源应该是 uniapp 框架自身的 bug,希望官方早日解决吧!

如果有大佬知道原因或其它解决方法,还请在评论区不吝赐教!

四、碎碎念

以前总在网上看到吐槽使用 uniapp 开发 APP 的评论和帖子,感觉不以为然。因为也用它做了几个小程序,虽说有槽点,但总体还能接受,毕竟开源不易。但是这次开发 APP 遇到这种问题,而且在开发其他功能时也不太顺利,感觉 uniapp 确实不太适合开发 APP,我算是被劝退了,下次再开发 APP 还是选择使用 React Native 或者 Flutter 更为良策。

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

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

相关文章

00 深度学习 PyTorch框架介绍

PyTorch框架介绍 什么是PyTorch&#xff1f; PyTorch 是一个开源的深度学习框架&#xff0c;由 Facebook 的人工智能研究团队开发&#xff0c;提供了强大的 GPU 加速的张量计算库和基于 autograd 系统的深度神经网络&#xff08;DNN&#xff09;库。它的设计强调简单性和直观…

4---自动化构建代码(逻辑梳理,轻松理解)

一、需求引出&#xff1a; 在使用编译器编译代码时&#xff0c;无论我们在一个项目中写了多少个文件(包括头文件、源文件)&#xff0c;我们都可以一键完成编译&#xff0c;编译器会自动处理各个文件之间的包含&#xff0c;调用关系。但是在Linux中&#xff0c;我们在一个目录下…

CSS 定位

为什么需要浮动? 我们在访问一些网站的时候, 经常会遇到如下这种情况, 有一个组件, 一直固定在屏幕的固定位置, 无论你如何滑动这个网页, 就会固定在哪里, 如下, 下图是王者荣耀的一个官网: 要实现上面的效果, 标准流或者是浮动是无法快速实现的, 此时就需要使用定位来实现.…

复习用到知识(asp.net)

public partial class teacheDetails : System.Web.UI.Page { // 页面加载时触发的事件 protected void Page_Load(object sender, EventArgs e) { // 检查是否是首次加载页面&#xff08;非回发&#xff09; if (!IsPostBack) { // 检查URL查询字符串中是否包含"…

H3C DHCP快速配置指南

1 配置DHCP服务器动态分配IPv4地址 1.1 简介 本案例介绍配置接口工作在DHCP服务器模式&#xff0c;实现动态分配IPv4地址的方法。 1.2 组网需求 如1.2 图1所示&#xff0c;公司将交换机做为核心交换机&#xff0c;现在需要在核心交换机上划分3个VLAN网段&#xff0c;Ho…

数据结构与算法学习笔记三---循环队列的表示和实现(C++)

目录 前言 1.为什么要使用循环队列 2.队列的顺序存储方式的实现 1.定义 2.队列初始化 3.销毁 4.清空队列 5.队列是否为空 6.队列长度 7.队头 8.入队 9.出队 10.遍历队列 11.完整代码 3.参考资料 前言 这篇文章介绍循环队列的表示和用法。 1.为什么要使用循环队…

深入理解Linux下的网络监控工具:iftop

目录标题 1. 什么是iftop?2. 安装iftop在Debian/Ubuntu上安装在CentOS/RHEL上安装在其他Linux发行版上 3. 使用iftop监控网络流量命令行选项界面说明交互命令 4. 相关参数及说明 在维护和监控Linux服务器时&#xff0c;了解网络流量的细节非常重要。网络监控可以帮助我们诊断延…

20240511金融读报:信贷风控卫星遥感系统实例蓝色金融

1、兴业银行信贷风控方面&#xff0c;卫星遥感应用系统&#xff08;看其他人吹了那么久&#xff0c;终于有个出来讲细节了&#xff09;&#xff1a;适用范围&#xff08;农业种植&#xff08;面积、长势、产量、市场价格、病虫害风险&#xff09;、林业&#xff08;面积、砍伐、…

远程服务器监控工具Navicat Monitor全新发布v3.0 - 支持PostgreSQL用户

Navicat Monitor 是一套安全、简单而且无代理的远程服务器监控工具。它具有强大的功能使你的监控发挥最大效用。受监控的服务器包括 MySQL、MariaDB 和 Percona Server&#xff0c;并与 Amazon RDS、Amazon Aurora、Oracle Cloud、Microsoft Azure 和阿里云等云数据库兼容。Nav…

C# 统计代码运行时长

using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Windows.Forms;namespace Sci {/// <summary>/// 统计代码…

AlmaLinux 文件拷贝 cp命令用法示例

AlmaLinux 文件拷贝 在Linux系统中&#xff0c;文件复制可以使用cp命令。以下是一些基本的cp命令用法示例&#xff1a; 复制文件到目标目录&#xff1a; cp source.txt /destination/directory/ 复制多个文件到目标目录&#xff1a; cp file1.txt file2.txt /destination/d…

网易灵犀办公企业邮箱的IMAP和POP3服务器地址

IMAP 电子邮件地址&#xff1a;saleyouxiang.com 帐户类型&#xff1a;IMAP 接收邮件服务器&#xff1a;imaphz.qiye.163.com 发送邮件服务器&#xff1a;smtphz.qiye.163.com 用户名&#xff1a;saleyouxiang.comPOP3 电子邮件地址&#xff1a;saleyouxiang.com 帐户类型&…

进程间通信:连接不同程序世界的桥梁

目录 一、进程间通信的重要性 二、常见的进程间通信方式 三、进程间通信的目的 四、进程间通信的本质 在计算机编程的领域中&#xff0c;进程间通信&#xff08;Inter-Process Communication&#xff0c;IPC&#xff09;是一个至关重要的概念。当我们在操作系统中运行多个程…

YOLOv5-7.0改进(四)添加EMA注意力机制

前言 关于网络中注意力机制的改进有很多种&#xff0c;本篇内容从EMA注意力机制开始&#xff01; 往期回顾 YOLOv5-7.0改进&#xff08;一&#xff09;MobileNetv3替换主干网络 YOLOv5-7.0改进&#xff08;二&#xff09;BiFPN替换Neck网络 YOLOv5-7.0改进&#xff08;三&…

【智能算法】鹭鹰优化算法(SBOA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2024年&#xff0c;Y Fu受到自然界中鹭鹰生存行为启发&#xff0c;提出了鹭鹰优化算法&#xff08;Secretary Bird Optimization Algorithm, SBOA&#xff09;。 2.算法原理 2.1算法思想…

MySQL:数据库管理的强大工具

MySQL&#xff1a;数据库管理的强大工具 文章目录 MySQL&#xff1a;数据库管理的强大工具引言MySQL的核心特性使用场景为什么选择MySQL结语 引言 在当今的数据驱动时代&#xff0c;数据库管理系统(DBMS)扮演着至关重要的角色。MySQL&#xff0c;作为一个开源的关系数据库管理…

Python - with语句 - 写一个支持with方法调用的类

Python - with语句 - 写一个支持with方法调用的类 前言 使用语句with open(a.txt, r) as f:可以自动关闭文件句柄&#xff0c;使用语句with torcu.no_grad()可以不计算梯度。 我学Py的时候咋好像没学过open和no_grad是怎么实现的&#xff1f; 于是今日了解了一下。 实现一…

【声呐仿真】学习记录2-运行ROV(带camera、sonar、dvl等传感器)例程

【声呐仿真】学习记录2-运行ROV&#xff08;带camera、sonar、dvl等传感器&#xff09;例程 前言第一阶段-学习Gazebo第二阶段-学习URDF、xacro第三阶段-寻找例程跑一个rexrov示例程序1.uuvsimulator quick_start2.能键盘控制的示例程序&#xff08;失败&#xff09;3.能键盘控…

Windows安装MySQL 8.4.0免安装版

下载地址&#xff1a;MySQL :: Begin Your Download 1 管理员权限打开cmd&#xff0c;切换到MySQL安装路径的bin目录下 cmd> C: cmd> cd ..\mysql-8.4.0-winx64\bin 2 移除已安装的MySQL服务&#xff08;若有&#xff09; 2.1 停止老的MySQL服务 net stop mysql …

Excel如何设置密码保护【图文详情】

文章目录 前言一、Excel如何设置密码保护&#xff1f;二、Excel如何取消密码保护&#xff1f;总结 前言 在软件项目开发过程中&#xff0c;会输出很多技术文档&#xff0c;其中也包括保密级别很高的服务器账号Excel文档。为了确保服务器账号相关的Excel文档的安全性&#xff0…