微信小程序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>
相关推荐
weixin_lynhgworld5 小时前
盲盒抽卡机小程序系统开发:连接线上线下娱乐新桥梁
小程序·娱乐
程知农6 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
鲲鹏猿8 小时前
微信小程序——早餐小程序
微信小程序·小程序
说私域9 小时前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_915909069 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero9 小时前
UniappDay04
vue.js·微信小程序·uni-app
2501_9151063211 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck16 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎06271 天前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯1 天前
小程序中自定义组件的样式隔离
微信小程序