修改百度地图 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>

巴特西

修改百度地图 infowindow 默认样式

最新文章

热门文章

巴特西

修改 百度地图 infowindow 默认样式

最新文章

热门文章

修改百度地图 infowindow 默认样式