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

最新推荐文章于 2023-09-11 16:02:47 发布

dandan__666

最新推荐文章于 2023-09-11 16:02:47 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/dandan__666/article/details/122877124

版权

百度

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

最终效果：

dandan__666

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
百度地图自定义信息窗口样式

在项目中，UI经常会把弹窗做自定义设计，那么如何实现自定义样式的地图弹窗呢，废话补多少，直接上代码1、引入依赖文件<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script><script type="text/javascript" src="js/InfoBox_min.js"></script>2、创建地图容器<
复制链接

扫一扫