自定义百度地图信息窗口BMap InfoWindow

代码段： 

getMap() {
		var carIcon = new BMap.Icon(
			require("@/assets/images/shouye/car.svg"),
			new BMap.Size(40, 40),
			{
				imageSize: new BMap.Size(28,28),
				imageOffset:new BMap.Size(0,0) 
	　　　　 }
		);
		var map = new BMap.Map("map_shishijiankong");
		var point = new BMap.Point(106.3, 33.92);
		map.centerAndZoom(point, 5);
		map.enableScrollWheelZoom(true);
		var marker = new BMap.Marker(point,{icon:carIcon});
        map.addOverlay(marker); 
		marker.addEventListener("click", getdetail);
		function getdetail() {
			var opts = {
				width: 760,     // 信息窗口宽度
				height: 260,     // 信息窗口高度
				title : "信息窗口标题" , // 信息窗口标题
				message:""
			};
			var content = `<p>
				<i class="el-icon-truck"></i>&nbsp;车牌号:&nbsp;{{item.chepaihao}}
				<span style="float:right;padding-right:7%;font-size:18px">
					<i class="el-icon-star-on"></i>
				</span>
			</p>
			<p><i class="el-icon-s-custom"></i>&nbsp;所属客户:&nbsp;{{item.kehu}}</p>
			<p><i class="el-icon-date"></i>&nbsp;设备时间:&nbsp;{{item.shijian}}</p>
			<p><i class="el-icon-s-tools"></i>&nbsp;状态:&nbsp;{{item.zhuangtai}}</p>
			<p><i class="el-icon-location"></i>&nbsp;位置:&nbsp;{{item.weizhi}}</p>`
			var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
            map.openInfoWindow(infoWindow, point); //开启信息窗口
		}
    },

css样式：

::v-deep .BMap_bubble_title {
	color:white;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	padding-left:10px;
	padding-top:5px;
	border-bottom:1px solid rgb(191, 191, 192);
	background-color:#79ccf3;
}
/* 消息内容 */
::v-deep .BMap_bubble_content {
	background-color:white;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:10px;
}
/* 内容 */
::v-deep .BMap_pop div:nth-child(9) {
	top:35px !important;
	border-radius:7px;
}
/* 左上角删除按键 */
::v-deep .BMap_pop img {
	top:45px !important;
	left:720px !important;
}
::v-deep .BMap_top {
	display:none;
}
::v-deep .BMap_top div{
	background-color:white;
}
::v-deep .BMap_bottom {
	display:none;
}
::v-deep .BMap_center {
	display:none;
}
/* 隐藏边角 */
::v-deep .BMap_pop div:nth-child(1) div {
	display:none;
}
::v-deep .BMap_pop div:nth-child(3) {
	display:none;
}
::v-deep .BMap_pop div:nth-child(5) {
	display:none;
}
::v-deep .BMap_pop div:nth-child(7) {
	display:none;
}

实现效果如下：

 原始效果：

参考博文：https://blog.csdn.net/qq_28462305/article/details/86063079