百度地图高级开发：上滑推拉菜单CSS解决方案

CSS样式表

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

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

        .panel {
            position: fixed;
            width: 94%;
            height: 400px;
            border-radius: 20px 20px 0 0;
            padding: 10px;
            left: 0;
            right: 0;
            bottom: -350px; /*底部露出的距离*/
            margin: 0 auto;
            transition: bottom 1s ease; /*推拉动画*/
            background-color: rgba(255, 255, 255, 1);
        }

HTML容器

<div id="lock_map"></div>
<div class="panel">LockDataV</div>

菜单事件

var btnStatus = 1;
    $('.panel').click(() => {
        if (btnStatus == 1) {
            btnStatus = 0;
            $('.panel')[0].style.cssText = 'bottom: 0rem;'
        } else {
            btnStatus = 1;
            $('.panel')[0].style.cssText = 'bottom: -350px;'
        }
    });

初始化地图

var map = new BMap.Map("lock_map");
    var point = new BMap.Point(117.016415, 36.619618);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);

@lockdata.cn