Mapbox GL JS 标记超出地图

Question

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

您可以看到汉堡不仅出现在地图之外，而且在移动时拉伸了窗口的宽度。

超文本标记语言

<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();
};

Answer 1

.story-map {
   overflow: hidden;
   //...
}

解决你的问题。尽管我也有点困惑为什么 Mapbox 将标记绘制到其画布之外。