百度地图-简单删除指定一类覆盖物_bmapgl removeoverlay-CSDN博客

本文链接：https://blog.csdn.net/weixin_45602368/article/details/119483060

在这里插入图片描述

示例Demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            height: 100%;
            width: 100%;
        }

        ul li {
            list-style: none;
        }

        .btn-wrap {
            z-index: 999;
            position: fixed;
            bottom: 3.5rem;
            margin-left: 3rem;
            padding: 1rem 1rem;
            border-radius: .25rem;
            background-color: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }

        .btn {
            width: 100px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: rgba(27, 142, 236, 1);
            font-size: 14px;
            border: 1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: rgba(27, 142, 236, 0.8);
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="allmap"></div>
    <ul class="btn-wrap" style="z-index: 99;">
        <li class="light btn" onclick="addOverlay1()">添加线覆盖物</li>
        <li class="night btn" onclick="removeOverlay()">清除线覆盖物</li>
    </ul>

    <script type="text/javascript"
        src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMapGL.Map('allmap');
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        var listLine = []
        var marker1 = new BMapGL.Marker(new BMapGL.Point(116.399, 39.910))
        var marker2 = new BMapGL.Marker(new BMapGL.Point(116.405, 39.920))
        var marker3 = new BMapGL.Marker(new BMapGL.Point(116.425, 39.900))
        marker1.disableMassClear();
        marker2.disableMassClear();
        marker3.disableMassClear();
        map.addOverlay(marker1)
        map.addOverlay(marker2)
        map.addOverlay(marker3)
        function addOverlay1() {
            // 创建折线
            var polyline = new BMapGL.Polyline([
                new BMapGL.Point(116.399, 39.910),
                new BMapGL.Point(116.405, 39.920),
                new BMapGL.Point(116.425, 39.900)
            ], {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 0.5
            });
            map.addOverlay(polyline); // 增加折线
        }

        // 清除折线覆盖物
        function removeOverlay() {
            map.clearOverlays();
        }


    </script>

</body>

</html>