微信小程序map组件callout与label简单用法

最新推荐文章于 2024-11-08 20:21:37 发布

想想水门会怎么C

最新推荐文章于 2024-11-08 20:21:37 发布

阅读量3.3k

点赞数 1

文章标签：小程序前端 vue

本文链接：https://blog.csdn.net/weixin_55553106/article/details/119914131

版权

本文探讨了地图标记中Callout和Label的使用，详细介绍了两者在初始位置、样式设置以及可能遇到的问题。Callout常用于显示详细信息，但过多可能导致遮挡，而Label可以有效避免此问题。尽管官方文档未提供层级调整，但Label能更好地解决标记显示冲突。此外，还提到了anchorY和anchorX参数用于调整标记位置。

摘要由CSDN通过智能技术生成

callout和label的效果图
在这里插入图片描述

callout初始位置在标记上方 label初始位置在标记右下方

data:{
	marker:[{
		//气泡label
		label:{
        		content: ‘预约’,  //文本
        		color: '#FF0202',  //文本颜色
        		borderRadius: 3,  //边框圆角
       			borderWidth: 1,  //边框宽度
        		borderColor: '#68c4c7',  //边框颜色
       			bgColor: '#ffffff',  //背景色
       			padding: 5,  //文本边缘留白
       			textAlign: 'center'  //文本对齐方式  left, right, center
      	},
      	//气泡callout
      	callout: {
        		content: '预约',  //文本
       	 		color: '#FF0202',  //文本颜色
        		borderRadius: 3,  //边框圆角
       			borderWidth: 1,  //边框宽度
       			borderColor: '#FF0202',  //边框颜色
       			bgColor: '#68c4c7',  //背景色
       			padding: 5,  //文本边缘留白
       			textAlign: 'center'  //文本对齐方式  left, right, center
   		}
	}]
}

另外可用参数anchorY, anchorX调整纵向和横向的位移
在这里插入图片描述
用callout有个问题就是如果marker过多会导致callout被遮挡官方文档没有提及zindex等参数调整层级点击当前标记也没用但是用label可以解决