百度地图开发自定义信息窗口openInfoWindow样式的解决方案

1.InfoWindow的样式，百度是没用提供直接使用的样式表的，目前都是热心网友在实际开发中自己的经验和实战总结； 2.百度提供了InfoBox富文本标签弹出框的接口，引入InfoBox.js，即可自定义样式或丰富的边框功能，但是鼠标单击下一个标注时，已经弹出的模态框是无法自动关闭；InfoWindow单击事件则是会即时展示现在单击的弹出模态框。 3.InfoBox的样式表要理解，必须理解的组成部分； 4.实现原理，就是CSS优先级和权重问题以及!important优先级；

/*地图标题 infoWindow*/
.BMap_bubble_title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    background: transparent !important;
}

.BMap_pop .BMap_top {
    background: rgba(0, 0, 0, .8) !important;
    border: 0 !important;
}

.BMap_pop .BMap_center {
    width: 281px !important;
    border: 0 !important;
    background: rgba(0, 0, 0, .8) !important;
}

.BMap_pop .BMap_bottom {
    border: 0 !important;
    background: rgba(0, 0, 0, .8) !important;
}

.BMap_pop div:nth-child(3) {
    background: transparent !important;
}

.BMap_pop div:nth-child(3) div {
    border-radius: 3px;
    background: rgba(0, 0, 0, .8) !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(1) {
    border-radius: 3px 0 0 0;
    background: transparent !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(1) div {
    background: rgba(0, 0, 0, .8) !important;
}

.BMap_pop div:nth-child(5) {
    border-radius: 0 0 0 3px;
    background: transparent !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(5) div {
    border-radius: 3px;
    background: rgba(0, 0, 0, .8) !important;
}

.BMap_pop div:nth-child(7) {
    background: transparent !important;
    left: 226px;
}

.BMap_pop div:nth-child(7) div {
    border-radius: 3px;
    background: rgba(0, 0, 0, .8) !important;
}

/*替换箭头*/
img[src="http://api0.map.bdimg.com/images/iw3.png"] {
    content: url('../images/iw3.png');
}

img[src="https://api.map.baidu.com/images/iw3.png"] {
    opacity: 0.7;
    margin-top: -692px !important;
    filter: alpha(opacity=70);
    content: url('../images/iw3.png');
}

//添加信息窗口
function addInfoWindow(marker, pos) {
    var title = '
' + pos.poi_name + '
';
    var html = [];
    html.push('
');
    html.push('
所属组织：' + pos.poi_address + '
')
    html.push('
经度：' + pos.poi_lon + '
')
    html.push('
纬度：' + pos.poi_lat + '
')
    html.push('
IP地址：' + pos.poi_ip + '
')
    html.push('
摄像机类型：' + pos.poi_type + '
')
    html.push('
安装方式：' + pos.poi_install + '
')
    html.push('
备注：' + pos.poi_content + '
')
    html.push('
');

    var opts = {
        width: 250, // 信息窗口宽度
        height: 210, // 信息窗口高度
        title: '' + title + '', // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
    }

    var infoWindow = new BMap.InfoWindow(html.join(""), opts);
    var openInfoWinFun = function () {
        marker.openInfoWindow(infoWindow);
    };
    marker.addEventListener("click", openInfoWinFun);
    return openInfoWinFun;
}

lockdatav Done !