跳到主要内容
版本：1.0.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%;
                }
        
                /*
                The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
                The toggleSidebar() function removes this class from the element in order to expand it.
                */
                .left.collapsed {
                    transform: translateX(-295px);
                }
        
                .right.collapsed {
                    transform: translateX(295px);
                }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/lite/v1.0.0/mapmost-lite-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: '***', // 授权码,此参数务必添加
    });
    
        new mapmost.Marker().setLngLat([120.72541613154851, 31.31171803927643]).addTo(map);
    
        function toggleSidebar(id) {
            var elem = document.getElementById(id);
            var classes = elem.className.split(' ');
            var collapsed = classes.indexOf('collapsed') !== -1;
    
            var padding = {};
    
            if (collapsed) {
            // Remove the 'collapsed' class from the class list of the element, this sets it back to the expanded state.
                classes.splice(classes.indexOf('collapsed'), 1);
    
                padding[id] = 300; // In px, matches the width of the sidebars set in .sidebar CSS class
                map.easeTo({
                    padding: padding,
                    duration: 1000 // In ms, CSS transition duration property for the sidebar matches this value
                });
            } else {
                padding[id] = 0;
            // Add the 'collapsed' class to the class list of the element
                classes.push('collapsed');
    
                map.easeTo({
                    padding: padding,
                    duration: 1000
                });
            }
    
            // Update the class list on the element
            elem.className = classes.join(' ');
        }
    
        map.on('load', function () {
            toggleSidebar('left');
        });

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