跳到主要内容
版本：9.2.0

地图中心偏移

可实现地图中心点位置随着地图移动而移动。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>地图中心偏移</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        
                .rounded-rect {
                    background: white;
                    border-radius: 10px;
                    box-shadow: 0 0 50px -25px black;
                }
        
                .flex-center {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
        
                .flex-center.left {
                    left: 0px;
                }
        
                .flex-center.right {
                    right: 0px;
                }
        
                .sidebar-content {
                    position: absolute;
                    width: 95%;
                    height: 95%;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 32px;
                    color: gray;
                }
        
                .sidebar-toggle {
                    position: absolute;
                    width: 1.3em;
                    height: 1.3em;
                    overflow: visible;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
        
                .sidebar-toggle.left {
                    right: -1.5em;
                }
        
                .sidebar-toggle.right {
                    left: -1.5em;
                }
        
                .sidebar-toggle:hover {
                    color: #0aa1cf;
                    cursor: pointer;
                }
        
                .sidebar {
                    transition: transform 1s;
                    z-index: 1;
                    width: 300px;
                    height: 100%;
                }
        
                 
                .left.collapsed {
                    transform: translateX(-295px);
                }
        
                .right.collapsed {
                    transform: translateX(295px);
                }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.2.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map">
    <div id="left" class="sidebar flex-center left collapsed">
        <div class="sidebar-content rounded-rect flex-center">
            Left Sidebar
            <div class="sidebar-toggle rounded-rect left" onclick="toggleSidebar('left')">
                &rarr;
            </div>
        </div>
    </div>
    <div id="right" class="sidebar flex-center right collapsed">
        <div class="sidebar-content rounded-rect flex-center">
            Right Sidebar
            <div class="sidebar-toggle rounded-rect right" onclick="toggleSidebar('right')">
                &larr;
            </div>
        </div>
    </div>
</div>
<script>
        let map = new mapmost.Map({
            container: 'map',  
            style: "<your style url>", 
            center: [120.72541613154851, 31.31171803927643], 
            zoom: 14, 
            userId: '***', // 授权码
        });
    
        function toggleSidebar(id) {
            var elem = document.getElementById(id);
            var classes = elem.className.split(' ');
            var collapsed = classes.indexOf('collapsed') !== -1;
    
            var padding = {};
    
            if (collapsed) {
            // 从元素的类列表中删除 "collapsed "类，这将使它回到扩展状态。
                classes.splice(classes.indexOf('collapsed'), 1);
    
                padding[id] = 300; // 以px为单位，与在 .sidebar 在 CSS 类中设置的侧边栏的宽度一致。
                map.easeTo({
                    padding: padding,
                    duration: 1000 // 在 ms 中，侧边栏的 CSS 过渡持续时间属性与此值相符
                });
            } else {
                padding[id] = 0;
            // 将 "collapsed "类添加到元素的类列表中
                classes.push('collapsed');
    
                map.easeTo({
                    padding: padding,
                    duration: 1000
                });
            }
    
            // 更新元素上的类别列表
            elem.className = classes.join(' ');
        }
    
        map.on('load', function () {
            new mapmost.Marker().setLngLat([120.72541613154851, 31.31171803927643]).addTo(map);
            toggleSidebar('left');
        });

</script>
</body>
</html>