百度地图 BMap InfoWindow修改默认样式 Css

默认的框一片白色，太丑，自己根据样式修改了一下，主要用到的样式都贴上来了，可根据自己需要修改。

Css样式如下

/*地图标题*/
.BMap_bubble_title {
	color:white;
	font-size:13px;
	font-weight:bold;
	text-align:left;
	padding-left:5px;
	padding-top:5px;
	border-bottom:1px solid gray;
	background-color:#0066b3;
}
/* 消息内容 */
.BMap_bubble_content {
	background-color:white;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:10px;
}
/* 内容 */
.BMap_pop div:nth-child(9) {
	top:35px !important;
	border-radius:7px;
}
/* 左上角删除按键 */
.BMap_pop img {
	top:43px !important;
	left:215px !important;
}
.BMap_top {
	display:none;
}
.BMap_bottom {
	display:none;
}
.BMap_center {
	display:none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
	display:none;
}
.BMap_pop div:nth-child(3) {
	display:none;
}
.BMap_pop div:nth-child(7) {
	display:none;
}

 

打开方式：

var opts = {
			width: 210, // 信息窗口宽度
			height: 125, // 信息窗口高度
			title: '
'+CBMC+'
', // 信息窗口标题
			enableMessage: true, //设置允许信息窗发送短息
			message: ""
			}
var infoWindow = new BMap.InfoWindow("时间:" + data.SBTime + "
经度:" + gpsX + "
纬度:" + gpsY + "
航速:" + data.Speed + "节", opts); // 创建信息窗口对象 
			 
mk.addEventListener("click", function() {   
	map.openInfoWindow(infoWindow, point); //开启信息窗口
});

map.openInfoWindow(infoWindow, point); //开启信息窗口

原始效果：

修改后的效果：