微信小程序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>
相关推荐
Developer-YC9 分钟前
像素图生成小程序开发全解析:从图片上传到Excel图纸
java·javascript·图像处理·微信小程序·excel
你很易烊千玺36 分钟前
即时通讯小程序
小程序·uni-app·直播
前端小白从0开始38 分钟前
小程序性能优化
小程序
风雨兼程^_^1 小时前
ai生成文章,流式传输(uniapp,微信小程序)
ai·微信小程序·uni-app·流式传输
2501_915918419 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063210 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
じòぴé南冸じょうげん18 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_9160137419 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184121 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张21 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview