微信小程序map组件自定义气泡真机不显示

最近遇到一个需求需要使用uniapp的map自定义气泡 ,做完之后发现在模拟器上好好的,ios真机不显示,安卓页数时好时不好的
一番查询发现是小程序的老问题了,网上的方法都试了也没能解决
后来看到有人说用nvue可以正常显示,所以记录一下使用nvue遇到的问题

nvue介绍文档
https://uniapp.dcloud.net.cn/tutorial/nvue-css.html

需要注意的是

  • class 进行绑定时只支持数组语法
  • 没有z-index概念,代码越靠后层级越高

另外,使用 slot=“callout” 进行自定义气泡时,cover-view 标签会因为循环导致所有气泡宽度都一样大,而不是根据内容自适应,这个问题可以通过再加一层cover-view ,不再:marker-id 的层级上写样式解决

在这里插入图片描述
参考链接:https://blog.csdn.net/weixin_42028275/article/details/135977705

<mapid="mymap"v-if="isShow && markers.length>0"v-show="!isVertical" style="width: 100vw; height: 100vh;":show-location="true":show-compass="true":markers="markers":longitude="locaInfo.longitude":latitude="locaInfo.latitude"@callouttap="callouttap"@regionchange="regionchange"><!-- 使用callout进行自定义 --><cover-view slot="callout"><!-- <template> --><cover-view v-for="(item,index) in markers":marker-id="item.id":key='index'><cover-view class="marker-item"><cover-view class="marker-box" :class="[item.options.isActive?'FF8D1A':'']"><cover-image class="position-absolute" style="margin-right: 5px; width: 30rpx; height: 30rpx;" :src="aliy+item.options.img"></cover-image><cover-view></cover-view><cover-view>{{item.options.labelName}}</cover-view></cover-view><cover-image class="marker-bg" :src="item.options.isActive ? aliy+item.options.active_bg : aliy+item.options.bg"></cover-image><!-- 右侧点 --><cover-view class="sales-status" :class="'sales-status'+item.options.salesStatus"></cover-view></cover-view></cover-view><!-- </template> --></cover-view>
</map>

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

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

相关文章

03 掌握Docker核心架构:镜像、仓库、容器及运行管理的深度解析

文章目录 03 掌握Docker核心架构:镜像、仓库、容器及运行管理的深度解析一 概述1.1 镜像1.2 镜像仓库1.3 容器二、镜像及镜像仓库2.1 本地镜像仓库2.2 镜像仓库简介2.3 使用远端仓库2.3.1 从远端镜像仓库拉取apache镜像2.3.2 从远端镜像仓库拉取指定版本apache镜像2.4 使用国内…

VS Code 图形化合并工具

VS Code 图形化合并工具能够帮助你更直观地进行代码合并和解决冲突 1. VS Code 内置的 Git 合并工具 VS Code 自带的 Git 支持已经非常强大&#xff0c;能够在合并冲突时提供直观的图形化界面&#xff0c;帮助你轻松解决冲突。以下是使用内置功能的步骤&#xff1a; 步骤一&…

会议平台后端优化方案

会议平台后端优化方案 通过RTC的学习&#xff0c;我了解到了端对端技术&#xff0c;就想着做一个节省服务器资源的会议平台 之前做了这个项目&#xff0c;快手二面被问到卡着不知如何介绍&#xff0c;便有了这篇文章 分析当下机制 相对于传统视频平台&#xff08;SFU&#xff…

RabbitMQ 优点和缺点

优势&#xff1a; 消息可靠性&#xff1a;RabbitMQ 提供了持久化功能和消息确认机制&#xff0c;确保消息在各种情况下都能可靠地存储和处理。 灵活的路由&#xff1a;通过多种交换机类型和绑定规则&#xff0c;RabbitMQ 能够灵活地路由消息到指定的队列。 支持多种消息协议&am…

Nagle 算法:优化 TCP 网络中小数据包的传输

1. 前言 在网络通信中&#xff0c;TCP&#xff08;传输控制协议&#xff09;是最常用的协议之一&#xff0c;广泛应用于各种网络应用&#xff0c;如网页浏览、文件传输和在线游戏等。然而&#xff0c;随着互联网的普及&#xff0c;小数据包的频繁传输成为一个不容忽视的问题。…

c# iTextSharp 读取PDF

安装 iTextSharp&#xff1a; 可以通过 NuGet 包管理器安装 iTextSharp&#xff1a; Install-Package itext7创建 PDF 文件&#xff1a; using System; using System.IO; using iText.Kernel.Pdf; using iText.Layout; using iText.Layout.Element;class Program {static voi…

828华为云征文 | 云服务器Flexus X实例:向量数据库 pgvector 部署,实现向量检索

目录 一、什么是向量数据库 pgvector &#xff1f; 二、pgvector 部署 2.1 安装 Docker 2.2 拉取镜像 2.3 添加规则 三、pgvector 运行 3.1 运行 pgvector 3.2 连接 pgvector 3.3 pgvector 常见操作 四、总结 本篇文章通过 云服务器Flexus X实例 部署向量数据库 pgve…

Windows11系统下SkyWalking环境搭建教程

目录 前言SkyWalking简介SkyWalking下载Agent监控实现启动配置SkyWalking启动Java应用程序启动Elasticsearch安装总结 前言 本文为博主在项目环境搭建时记录的SkyWalking安装流程&#xff0c;希望对大家能够有所帮助&#xff0c;不足之处欢迎批评指正&#x1f91d;&#x1f91…

计算机毕业设计之:音乐媒体播放及周边产品运营平台(源码+文档+讲解)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

听说这是MATLAB基础?

MATLAB&#xff08;矩阵实验室&#xff09;是一个强大的高性能计算环境和编程语言&#xff0c;广泛应用于数学计算、算法开发、数据分析、可视化以及模拟等多个领域。以下是MATLAB的一些基础知识&#xff0c;涵盖其功能、语法、基本操作等方面。 1. MATLAB环境 工作区&#xf…

Json 在线可视化工具,分享几个

文章目录 1.json.cn2.json4u.cn3.jsonvisual.com4.jsoncrack5.altearius.github.io6.json.wanvb.com 前序&#xff1a;本文是对多种 Json 在线可视化工具 的介绍、分享。Json官网 https://www.json.org/json-en.html 个人比较中意第四款&#xff1a; https://jsoncrack.com/ed…

测试用例的进阶二

1. 按开发阶段划分 1.1 测试金字塔 从上到下&#xff0c;对于测试人员代码就是要求越来越低&#xff1b; 从下到上&#xff0c;越来越靠近用户&#xff1b; 从下到上&#xff0c;定位问题的成本越来越高&#xff1b; 1.2 单元测试(Unit Testing) 单元测试是对软件组成单元进…

uni-app+vue3开发微信小程序使用本地图片渲染不出来报错[渲染层网络层错误]Failed to load local image resource

我把图片放在assets里面页面通过相对路径引入。结果一直报错。 最后我把图片放在static文件夹下面。然后修改路径指向static就可以了 或者是我们必须先import 这个图片然后在使用 import banner1 from ../../assets/images/banner/banner1.png; <image :src"banner…

图解C#高级教程(四):协变、逆变

本章的主题是可变性&#xff08;variance&#xff09;&#xff0c;这里的可变性更多的是指基类和派生类之间的转换。可变性分为三种&#xff1a;协变&#xff08;covariance&#xff09;、逆变&#xff08;contravariance&#xff09;和不变&#xff08;invariance&#xff09;…

酒店构建数字化业产业—未来之窗行业应用跨平台架构

一、建设酒店产业数字化 二、酒店数字化产业目标 三、酒店数字化业务指标 四、酒店数字化管理层 五、酒店数字化数据应用 六、酒店数字化子系统 七、酒店数字化分析

Arthas sc(查看JVM已加载的类信息 )

文章目录 二、命令列表2.2 class/classloader相关命令2.2.5 sc&#xff08;查看JVM已加载的类信息 &#xff09;举例1&#xff1a;模糊搜索&#xff0c;xx包下所有的类举例2&#xff1a;打印类的详细信息举例3&#xff1a;打印出类的Field信息 本人其他相关文章链接 二、命令列…

C++ 游戏开发

C游戏开发 C 是一种高效、灵活且功能强大的编程语言&#xff0c;因其性能和控制能力而在游戏开发中被广泛应用。许多著名的游戏引擎&#xff0c;如 Unreal Engine、CryEngine 和 Godot 等&#xff0c;都依赖于 C 进行核心开发。本文将详细介绍 C 在游戏开发中的应用&#xff0…

DC00024基于ssm实验室预约管理系统java web项目web教师预约jsp预约管理系统

1、项目功能演示 DC00024基于web实验室预约管理系统ssm教室预约实验室预约管理系统java web项目MySQL 2、项目功能描述 基于ssm实验室预约管理系统分为用户和系统管理员两个角色。 2.1 系统管理员 1、系统登录 2、用户管理&#xff1a;修改个人信息、修改个人密码、教师管理…

执行力怎么培养?

执行力怎么培养&#xff1f; 并行&#xff1a;适合在初期养成习惯&#xff0c;不抱对结果的期望天才就是强迫症&#xff1a;适合中期修身&#xff1a;适合高级 并行&#xff1a;适合在初期养成习惯&#xff0c;不抱对结果的期望 在你开始做任何事情的时候&#xff0c;不要一开…

配置Scrapy项目

配置Scrapy项目是一个涉及多个步骤的过程&#xff0c;在上一篇博客中已经写了安装Scrapy、创建Scrapy项目的步骤。 接下来应该定义Item类、编写爬虫程序以及配置settings.py文件等。以下是一个详细的配置Scrapy项目的步骤&#xff1a; 一、定义Item类 在项目目录下…