自定义百度地图信息窗口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;}

实现效果如下：

原始效果：

参考博文：/qq_28462305/article/details/86063079