Mapbox GL JS标记不在地图外

地图加载后，所有汉堡包/标记都可见（我有意将缩放比例设置为考虑该区域中的所有汉堡包。）由于某种原因，当我在地图上平移或放大/缩小时，汉堡包/标记跟随平移并逃离地图的边界/边缘。我尝试使用默认标记，并删除了以编程方式将弹出窗口添加到标记的脚本。我将在此处发布一些相关代码。

您会看到，汉堡不仅显示在地图外，而且在移动时会拉伸窗口的宽度。

的HTML

<div class="content">
        <div class="story-list"></div>
        <div class="story-map">
            <div class="story-map-container" id="story-map-container"></div>
        </div>
</div>

的CSS

.content {
    padding: 6.5%;
    width: 87%;
    background-image: url("../media/images/temp-gradient-low.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* story-list */

.story-list {
    display: inline-block;
    position: relative;
    width: 66%;
    z-index: 1;
    vertical-align: top;
    font-size: 0;
    padding-bottom: 1%;
}

/* story-map */

.story-map { /* using id='' in order to override the position set by mapbox*/
    /*background-color: white;*/
    display: inline-block;
    position: sticky;
    top: 0;
    width: 33%;
    height:  100vh;
    /*padding-left: 2.5%;*/
    z-index: 0;
    vertical-align: top;
    /*float: right;*/
}

#story-map-container {
    background-color: lightgreen;
    width: 100%;
    /*margin-left: 2.5%;*/
    height: 100%;
    overflow: visible;
}

.mapboxgl-map {
    position: absolute;
    overflow: visible;
}

.mapboxgl-marker {
    background-image: url("../media/icons/burger-marker.png");
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.mapboxgl-popup {
    max-width: 200px;
}

.mapboxgl-popup-content {
    text-align: center;
}

JS

var map = null;

function initMapbox() {
    mapboxgl.accessToken = 'pk.eyJ1IjoiZGFua3NreSIsImEiOiJjanNmbTA0YWkwdWx5NDNtdG1idHpwNTE3In0.Y16huX7_p26tsDlcJTWWFQ';
    map = new mapboxgl.Map({
        container: 'story-map-container',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 10,
        center: [-118.338604, 34.083480]
    });
}

function parseStuff() {
    const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
    const list = Array.from({length: 10}, (x,i) => {
        return {
            name: 'The Burger Place',
            address: '123 Yumyum Hwy',
            coordinates: {lat: 34.083480 + Math.random() * 0.1, lng: -118.348604 + Math.random() * 0.1},
            phoneNumber: '1-123-456-7890',
            website: {
                text: 'BURGERSITE',
                url: 'http://google.com'
            },
            description: 'A happy place for people who eat meat.',
            review: lorem.substring(0, lorem.length * 0.6)
        };
    });
    console.log(list);
    list.forEach((element, index) => {
        var customMarker = document.createElement('div');
        customMarker.className = 'mapboxgl-marker'; 
        customMarker.onclick = (e) => {
            map.panTo([element.coordinates.lng, element.coordinates.lat]);
            window.location.hash = `burger-place-${index}`
        };
        var popupContent = `<a href="${element.website.url}">${element.name}</a><br /><a href="tel:${element.phoneNumber}">${element.phoneNumber}</a>`
        var marker = new mapboxgl.Marker(customMarker)
            .setLngLat([element.coordinates.lng, element.coordinates.lat]);
        marker.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(popupContent))
            .addTo(map);
    })
    $('.story-list').html(componentList);
}

window.onload = () => {
    initMapbox();
    parseStuff();
};