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

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

news 2026/2/9 18:23:03

最近遇到一个需求需要使用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>

相关文章：

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

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

编程日记 2024/10/1 3:06:02

数据结构之链表（2），双向链表

目录 前言 一、链表的分类详细 二、双向链表 三、双向链表的实现 四、List.c文件的完整代码 五、使用演示 总结 前言 接着上一篇单链表来详细说说链表中什么是带头和不带头&#xff0c;“哨兵位”是什么&#xff0c;什么是单向什么是双向&#xff0c;什么是循环和不循环。然后实…...

编程日记 2024/10/1 2:59:54

STL之list篇（下）（从底层分析实现list容器，逐步剥开list的外表）

文章目录 前言一、list的数据结构和类实现需求1.1 数据结构1.2 list类实现需求 二、list迭代器的实现2.1 为什么list不能直接把迭代器当作指针一样使用&#xff1f;2.2 list迭代器的框架设计2.3 *和-> 操作符的重载2.4 和-- 操作符的重载2.5 !和 操作符的重载 三、 list的函…...

编程日记 2024/10/1 2:58:54

视频去水印的3个技巧，教你无痕去水印

许多视频平台为了推广自身品牌或者广告用途&#xff0c;会在视频上添加水印。这些水印不仅影响了视频的美观&#xff0c;还可能限制了内容的传播范围。幸运的是&#xff0c;有几种简单而有效的方法可以帮助我们去除视频中的水印&#xff0c;同时保持视频的原始画质和观感。以下…...

编程日记 2024/10/1 2:57:52

LSTM模型改进实现多步预测未来30天销售额

关于深度实战社区 我们是一个深度学习领域的独立工作室。团队成员有&#xff1a;中科大硕士、纽约大学硕士、浙江大学硕士、华东理工博士等&#xff0c;曾在腾讯、百度、德勤等担任算法工程师/产品经理。全网20多万粉丝&#xff0c;拥有2篇国家级人工智能发明专利。 社区特色…...

编程日记 2024/10/1 2:56:51

八LAMP搭建

# LAMP ## 一、知识回顾 ### FTP samba nfs 特点 - 借用Linux用户作为映射用户&#xff0c;进行权限管理 - 软件本身还有管理控制权限 #### 客户端连接到服务器后进行读写执行等操作 &#xff0c;必须同时具有: - 软件许可的权限 vsftpd: anon upload enableYES - 文件…...

编程日记 2024/10/1 2:55:50

Windows——解除Windows系统中文件名和目录路径的最大长度限制

第一步&#xff1a;打开本地组策略编辑器 按下Win R键打开运行窗口&#xff0c;输入 gpedit.msc 并回车&#xff0c;打开本地组策略编辑器。 第二步&#xff1a;开启 长路径设置 第三步&#xff1a;重启计算机...

编程日记 2024/10/1 2:54:49

黑名单与ip禁令是同一个东西吗

黑名单和IP禁令相关&#xff0c;但它们并不是完全相同的概念。以下是它们之间的区别&#xff1a; 黑名单 定义&#xff1a;黑名单通常是一个包含不允许或被禁止的用户、IP地址、域名或其他实体的列表。用途&#xff1a;用于阻止特定用户或实体访问某个系统或服务。黑名单可以…...

编程日记 2024/10/1 2:52:47

FuTalk设计周刊-Vol.075

国庆75周年&#xff0c;也是第75期周刊&#xff5e; 祝大家国庆快乐&#xff5e;&#xff01; #AI漫谈 热点捕手 1.万字深剖&#xff01;13位AI巨擘联袂&#xff0c;1.6万字解码生成式AI产品「全攻略」 “生成式人工智能产品”主题论坛&#xff0c;邀请到了来自腾讯、商汤科…...

编程日记 2024/10/1 2:50:46

PE节表中是否存在misc.VirtualSize 比SizeofRawData还要大的情况

确实是存在的,这是win10自带记事本,可以看到 确实是大.所以在申请imagebuffer的时候,还是需要比较大小.但是在还原的时候.只考虑sizeofRawData即可>...

编程日记 2024/10/1 2:49:45

栈及笔试题

目录 栈的实现 1、数组栈 2、链式栈 栈的创建 栈的打印 内存泄漏 栈溢出 练习 有效的括号 栈的实现 栈后入先出 1、数组栈 &#xff08;最佳实现&#xff0c;且访问数据的时候CPU告诉访存命中率比较高&#xff0c;因为地址连续存放&#xff0c;访问时CPU从cache里一…...

编程日记 2024/10/1 2:44:41

【工程测试技术】第3章 测试装置的基本特性,静态特性和动态特性，一阶二阶系统的特性，负载效应，抗干扰性

目录 3.1 概述 1测量装置的静态特性 2.标准和标准传递 3.测量装置的动态特性 4.测量装置的负载特性 5.测量装置的抗干扰性 1.线性度 2.灵敏度 3.回程误差 4.分辨力 5.零点漂移和灵敏度漂移 3.3.1 动态特性的数学描述 1.传递函数 2.频率响应函数 3.脉冲响应函数 …...

编程日记 2024/10/1 2:43:40

ireport 5.1 中文生辟字显示不出来，生成PDF报字体找不到

ireport生成pdf里文字不显示。本文以宋体中文字不显示为例。 问题&#xff1a;由浅入深一步一步分析 问题1、预览正常&#xff0c;但生成pdf中文不显示 报告模板编辑后&#xff0c;预览正常&#xff0c;但生成pdf中文不显示。以下是试验过程&#xff1a; 先编辑好一个报告单模…...

编程日记 2024/10/1 2:38:34

给Ubuntu虚拟机设置静态IP地址（固定IP）

查看 为Ubuntu虚拟机配置静态IP地址&#xff08;固定IP&#xff09;的方法经过亲自测试&#xff0c;已被证实有效。 这里你记得网关就可以了&#xff0c;等下要用 查看配置前的网络信息 ifconfig 查看网关 route -n 配置 配置网络文件 cd /etc/netplan/ ls 查看自己的文件的名…...

编程日记 2024/10/1 2:37:33

spring boot文件上传之x-file-storage

spring boot文件上传之x-file-storage 今天看到一个文件上传的开源组件x-file-storage&#xff0c;官方地址如下&#xff1a; https://x-file-storage.xuyanwu.cn/#/ 该组件官网是这样介绍的&#xff0c;如下&#xff1a; 一行代码将文件存储到本地、FTP、SFTP、WebDAV、阿…...

编程日记 2024/10/1 2:36:32

Object.values() 、 Object.keys()

拿到当前对象里面的value值 // 假设你有一个对象 const myObject {name: Kimi,age: 30,country: Moon };// 获取对象的所有值 const values Object.values(myObject);// 输出值数组 console.log(values); // ["Kimi", 30, "Moon"] 如果你需要在 Vue 组…...

编程日记 2024/10/1 2:34:30

脸爱云管理系统存在任意文件上传漏洞

漏洞描述 脸爱云一脸通智慧管理平台是一套功能强大、运行稳定、操作简单方便、用户界面美观的一脸通系统。该平台整合了人脸识别技术和智能化解决方案&#xff0c;可以实现识别和管理个体身份&#xff0c;为各种场景提供便捷的身份验证和管理功能。其存在任意文件上传漏洞&…...

编程日记 2024/10/1 2:32:27

elasticsearch_exporter启动报错 failed to fetch and decode node stats

最近把服务器迁移到了ubuntu系统&#xff0c;结果发现在centos还正常运行的elasticsearch_exporter&#xff0c;用systemd启动后一直报错 failed to fetch and decode node stats 在网上翻了大半年&#xff0c;竟然都无解&#xff01;这种报错&#xff0c;很明显就是你的ES密码…...

编程日记 2024/10/1 2:31:26

Git 使用方法

简介 Git常用命令 Git 全局设置 获取Git 仓库 方法二用的比较多 将仓库链接复制 在 git base here ----> git clone 仓库链接 工作区、暂存区、版本库 Git 工作区中文件中的状态 本地仓库的操作 远程仓库操作 git pull 将代码推送到远程仓库 1. git add 文件名 ---放…...

编程日记 2024/10/1 2:30:25

生产环境升级mysql流程及配置主从服务

之前写到过mysql升级8.4的文章, 因此不再介绍mysql的安装过程 避免服务器安装多个mysql引起冲突的安装方法_安装两个mysql会冲突吗-CSDN博客 生产环境升级mysql8.4.x流程 安装mysql 参考之前文章: 避免服务器安装多个mysql引起冲突的安装方法_安装两个mysql会冲突吗-CSDN博客…...

编程日记 2024/10/1 2:28:24

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/2/9 4:25:05

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42