微信小程序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>
相关推荐
2501_9160088931 分钟前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌32 分钟前
线上教学小程序:构建高效互动的云端学习空间
学习·小程序
源码_V_saaskw34 分钟前
JAVA校园跑腿校园外卖源码校园外卖小程序校园代买帮忙外卖源码社区外卖源码小程序+公众号+h5
java·开发语言·微信小程序·小程序
源码哥_博纳软云40 分钟前
JAVA同城预约服务家政服务美容美发洗车保洁搬家维修家装系统源码小程序+公众号+h5
java·开发语言·微信小程序·小程序
海阔天空66884 小时前
微信小程序添加水印功能
微信小程序·canvas·水印
流***陌5 小时前
淘宝一番赏抽赏小程序:开启趣味抽赏新体验
小程序
说私域5 小时前
开源链动2+1模式AI智能名片S2B2C商城小程序在竞争激烈的中低端面膜服装行业中的应用与策略
大数据·人工智能·小程序
_AaronWong5 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
陈陈小白6 小时前
小程序如何接入火山引擎埋点数据
小程序·火山引擎
星光一影6 小时前
Java版小区物业管理系统/业主端/物业端/管理端/支持公众号、小程序、app
java·大数据·小程序