微信小程序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

html 复制代码
<map
	id="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>
相关推荐
郑叔敲代码1 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名4 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风5 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者86 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008896 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌7 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好2677 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_915106328 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆8 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
2501_915921438 小时前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式