vue项目高德地图，实现示例块功能

最新推荐文章于 2023-12-25 14:46:19 发布

奚大野...

最新推荐文章于 2023-12-25 14:46:19 发布

阅读量179

点赞数

分类专栏：高德地图文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41752378/article/details/128116318

版权

高德地图专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<div style="height:calc(100vh - 100px - 20px - 55px);position:relative" id="mapContainerDiv">
	<div id="videoMap" clas="videoMap" style="height:100%"></div>
	<div class="mapIconSign">
		<span class="iconTitle">图标示例：</span>
		<div><img src="@/assets/gif/12.gif"/><span>电动车</span></div>
		<div><img src="@/assets/gif/22.gif"/><span>堆物堆料</span></div>
		<div><img src="@/assets/gif/42.gif"/><span>消防通道</span></div>
		<div><img src="@/assets/gif/32.gif"/><span>火眼</span></div>
	</div>
</div>

.mapIconSign{
	position:absolute;
	left:0px;
	bottom:20px;
	padding:10px 20px 0px 10px;
	border-radius:0px 10px 10px 0px;
	background:rgba(0,0,0,.6);
	display:flex;
	flex-direction:column;
	pointer-events:none;   // 鼠标禁止点击
	.iconTitle{
		padding:0px 0px 10px 0px;
		color:#5ccf07;
		font-weight:bold;
		font-size:14px;
	}
	div{
		display:flex;
		align-items:center;
		padding-bottom:10px;
		
		img{
			width:20px;
			height:20px;
			margin-right:10px;
		}
		span{
			font-size:12px;
		}
	}
}