預設的框一片白色,太醜,自己根據樣式修改了一下,主要用到的樣式都貼上來了,可根據自己需要修改。
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: '<h4>'+CBMC+'</h4>', // 資訊視窗标題
enableMessage: true, //設定允許資訊窗發送短息
message: ""
}
var infoWindow = new BMap.InfoWindow("時間:" + data.SBTime + "<br>經度:" + gpsX + "<br>緯度:" + gpsY + "<br>航速:" + data.Speed + "節", opts); // 建立資訊視窗對象
mk.addEventListener("click", function() {
map.openInfoWindow(infoWindow, point); //開啟資訊視窗
});
map.openInfoWindow(infoWindow, point); //開啟資訊視窗
原始效果:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2csETQ61UeZRkT0kkeYhnRzwEMW1mY1RzRapnTtxkb5ckYplTeMZTTINGMShUYfRHelRHLwEzX39GZhh2css2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xyayFWbyVGdhd3LcV2Zh1Wa9M3clN2byBXLzN3btg3Pn5GcuEDNwUTOxATM4ATMwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
修改後的效果: