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

微信小程序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.lryc.cn/news/450368.html

相关文章:

  • 数据结构之链表(2),双向链表
  • STL之list篇(下)(从底层分析实现list容器,逐步剥开list的外表)
  • 视频去水印的3个技巧,教你无痕去水印
  • LSTM模型改进实现多步预测未来30天销售额
  • 八LAMP搭建
  • Windows——解除Windows系统中文件名和目录路径的最大长度限制
  • 黑名单与ip禁令是同一个东西吗
  • FuTalk设计周刊-Vol.075
  • PE节表中是否存在misc.VirtualSize 比SizeofRawData还要大的情况
  • 栈及笔试题
  • 【工程测试技术】第3章 测试装置的基本特性,静态特性和动态特性,一阶二阶系统的特性,负载效应,抗干扰性
  • ireport 5.1 中文生辟字显示不出来,生成PDF报字体找不到
  • 给Ubuntu虚拟机设置静态IP地址(固定IP)
  • spring boot文件上传之x-file-storage
  • Object.values() 、 Object.keys()
  • 脸爱云管理系统存在任意文件上传漏洞
  • elasticsearch_exporter启动报错 failed to fetch and decode node stats
  • Git 使用方法
  • 生产环境升级mysql流程及配置主从服务
  • 论软件体系结构的演化
  • 【go入门】常量
  • 2.1 HuggingFists系统架构(二)
  • 工具类:JWT
  • 王道-计网
  • 【机器学习(十)】时间序列案例之月销量预测分析—Holt-Winters算法—Sentosa_DSML社区版
  • Webpack优化问题
  • yjs10——pandas的基础操作
  • Squaretest单元测试辅助工具使用
  • MFU简介
  • 十分钟实现内网连接,配置frp