当前位置: article > 正文

百度地图自定义信息窗口样式

作者：不正经 | 2024-02-18 18:14:24

踩

百度地图自定义信息窗口

在项目中，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>

最终效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/109656