微信小程序map组件自定义气泡真机不显示

以对_2024-09-30 17:36

最近遇到一个需求需要使用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>