• 修改 百度地图 infowindow 默认样式


    1.百度 api 没有 提供可以修改 infowindow 默认样式的 方法。

    如需修改,需要 自定义 替换 默认样式。

    demo.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="map"></div>
        <!-- 弹窗内容 -->
        <div id="cont">
            <div id="close"></div>
            <p id="title"></p>
            <table border='0' cellpadding='3' cellspacing='1' >
                <tr>
                    <td>值班领导</td>
                    <td>值班员</td>
                    <td>当班执勤科队</td>
                    <td>重要事项</td>
                    <td>通道开通</td>
                </tr>
                <tr>
                    <td>张站长</td>
                    <td>王小二</td>
                    <td>巡检科一队</td>
                    <td>无</td>
                    <td>自动12,人工4</td>
                </tr>
                <tr>
                    <td>李站长</td>
                    <td>张小四</td>
                    <td>巡检科二队</td>
                    <td>增加人工通道</td>
                    <td>自动12,人工4</td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        var map = new BMap.Map("map", {
            minZoom : 12,
            maxZoom : 18
        });
        
        var point = new BMap.Point(114.1262324342, 22.5390750268);// 创建点坐标
        map.centerAndZoom(point, 12);// 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
        map.enableKeyboard(); // 启用键盘操作。
    
        // 默认位置
        var ptlt = new BMap.Point(114.1622188176,22.5594612014);
        var myIconlt = new BMap.Icon("icon.png", new BMap.Size(71, 95),{
            anchor: new BMap.Size(-20, 10)
        });
        myIconlt.setImageSize(new BMap.Size(71, 95));
        var markerlt = new BMap.Marker(ptlt, { icon: myIconlt });  // 创建标注
        map.addOverlay(markerlt);    //增加点
    
        // 弹窗
        markerlt.addEventListener("mouseover", function () {
            $('#cont').css({'display':'','top': mouseYPosition + 'px','left': mouseXPosition + 'px'});
            setModal('莲塘边检站勤务实时信息');
        });
    
        markerlt.addEventListener("mouseout", function () {
            $('#cont').css({'display':'none'});
        });
        /*********************************************************************************/
        $('#cont').on('mouseover',function(){
            $('#cont').css({'display':''});
        })
    
        /*获取当前鼠标位置*/
        function mousePosition(ev){
            if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
            }
            return {
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        }
    
        document.onmousemove = mouseMove;
    
        var mouseXPosition;
        var mouseYPosition;
    
        function mouseMove(ev){
            ev = ev || window.event;
            var mousePos = mousePosition(ev);
            mouseXPosition = mousePos.x - 230;
            mouseYPosition = mousePos.y - 170;
        }
        /*关闭弹出*/
        $('#close').on('click',function(){
            $('#cont').css({'display':'none'});
        });
    
        /*简单封装 设置title*/
        function setModal(title){
            $('#title').text(title);
        }
    </script>
    </html>
    

      

  • 相关阅读:
    列举面向对象中的特殊成员以及应用场景
    python中os和sys模块
    谈谈你对闭包的理解?
    Python面试题(练习一)
    logging模块的作用以及应用场景
    Python的垃圾回收机制
    Python的深浅copy
    rust 支持的CPU架构
    Rust 数据类型
    网站用https访问的问题
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7820248.html
Copyright © 2020-2023  润新知