在项目中，UI经常会把信息窗口做自定义设计，那么如何实现自定义样式的信息窗口呢。核心代码如下：

/*
        * 创建信息窗口
        * */
        function _createMapvInfoWindow(width,height,info,item,point) {

            var infoBox = new BMapLib.InfoBox(map,info,{
                boxStyle:{
                    offset: new BMap.Size(10,10),  //偏移量
                    opacity: "0.8",  //透明度
                    background: "rgba(15,43,105,1)",  //背景颜色
                    boxShadow:'0px 3px 20px 3px rgba(23,211,253,0.3) inset',  //阴影
                    border: '1px solid rgba(62,136,255,1)',  //边框
                    width: width+"px",  //宽度
                    height: height+"px",  //高度
                    borderRadius: '2px'  //边框宽度
                },
                closeIconUrl:"/demo/static1/images/map/close.png",  //关闭信息窗口icon
                closeIconMargin: "1px 1px 0 0", //关闭按钮的位置
                enableAutoPan: true,
                align: INFOBOX_AT_TOP  //信息窗口的位置，INFOBOX_AT_TOP：顶部居中
            });

            infoBox['id'] = item.id
            infoBox.open(point);
            infoWindows.push(infoBox)
        }

要完成自定义样式的信息弹窗，需要引入百度API及 InfoBox_min.js。

完整代码： 

<!DOCTYPE html>
<html>

<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图自定义信息窗口样式</title>
    <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
    <!-- InfoBox_min.js 可以去百度地图开放者平台获取 -->
    <script src="static1/js/InfoBox_min.js"></script>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .bigMap{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!--地图-->
    <div id="allmap" class="bigMap"></div>

    <script type="text/javascript">
        var map = null
        var zoom = 10
        var infoWindows = []

        map = new BMap.Map("allmap");
        map.centerAndZoom('石家庄')

        var iconUrl = 'static1/images/map/blueCircle.png'  //icon图片地址

        var icon = new BMap.Icon(iconUrl,
            new BMap.Size(100, 100), 
            {
                imageOffset:new BMap.Size(0,0), // 图片相对视窗的偏移
                imageSize: new BMap.Size(100,100) // 引用图片实际大小
            });

        var marker = new BMap.Marker(new BMap.Point(114.51808,38.041719), {
            icon: icon
        });

        marker.id = 1  //给marker配置id，便于后续控制弹窗

        map.addOverlay(marker)

        marker.addEventListener('mouseover', function (e) {//鼠标悬停显示信息
            //先判断是否已经存在窗口
            if (!_checkAndOpenInfoWindowByMapv(marker.id, e, true)) {
                return false
            }
            var info = '<div class="info"><h5 style="color:#fff566;font-size:16px">'+ '标题' +'</h5><p style="color:#fff">内容</p></div>'
            _createMapvInfoWindow( 170, 100, info, marker, e.point)
        });
        
        marker.addEventListener('mouseout', function(e){  //鼠标移出
            _checkAndCloseInfoWindowByMapv(marker.id, e)
        })

        /*
        * 判断信息窗口是否存在，如果已存在，直接打开，如果不存在返回false
        * */
        function _checkAndOpenInfoWindowByMapv(id,e,notCloseLast) {
            
            var index = null
            var isHasInfowindow = false

            for (var i = 0; i < infoWindows.length; i++) {
                if(infoWindows[i]["id"] === id) {
                    index = i
                    isHasInfowindow = true
                    break
                }
            }

            if(isHasInfowindow && !infoWindows[index].isOpen){
                infoWindows[index].open(e.point)
                return false
            }else{
                return true
            }
        }

        
        /*
        * 创建信息窗口
        * */
        function _createMapvInfoWindow(width,height,info,item,point) {

            var infoBox = new BMapLib.InfoBox(map,info,{
                boxStyle:{
                    offset: new BMap.Size(10,10),  //偏移量
                    opacity: "0.8",  //透明度
                    background: "rgba(15,43,105,1)",  //背景颜色
                    boxShadow:'0px 3px 20px 3px rgba(23,211,253,0.3) inset',  //阴影
                    border: '1px solid rgba(62,136,255,1)',  //边框
                    width: width+"px",  //宽度
                    height: height+"px",  //高度
                    borderRadius: '2px'  //边框宽度
                },
                closeIconUrl:"/demo/static1/images/map/close.png",  //关闭信息窗口icon
                closeIconMargin: "1px 1px 0 0", //关闭按钮的位置
                enableAutoPan: true,
                align: INFOBOX_AT_TOP  //信息窗口的位置，INFOBOX_AT_TOP：顶部居中
            });

            infoBox['id'] = item.id
            infoBox.open(point);
            infoWindows.push(infoBox)
        }                       
        
        /*
        * 判断信息窗口是否存在，如果已存在，关闭信息窗口
        * */
        function _checkAndCloseInfoWindowByMapv(id) {
            var index = null
            var isHasInfowindow = false

            for (var i = 0; i < infoWindows.length; i++) {
                if(infoWindows[i]["id"] === id) {
                    index = i
                    isHasInfowindow = true
                    break
                }
            }

            if(isHasInfowindow){
                infoWindows[index].close()
                return false
            }else{
                return true
            }
        }
    </script>
</body>

</html>

最终效果：

 

# 百度
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生