修改百度地图 infowindow 默认样式

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

weixin_34223655

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

阅读量7.1k

点赞数

文章标签： javascript 前端移动开发 ViewUI

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>