Mapbox GL JS标记超出地图范围

Question

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

你可以看到汉堡包不仅出现在地图外，而且随着它们的移动而扩展窗口的宽度。

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

- AlleyOOP

---

你能把这个放到 jsfiddle、codepen 或者类似的网站上吗？ - Steve Bennett

@SteveBennett https://mapbox-demo-issue.herokuapp.com/ - AlleyOOP

谢谢提供演示。接受的答案对我来说很好用。 - TomasMolina

Answer 1

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

修复您的问题。虽然我也有点困惑为什么mapbox在其画布之外绘制标记。

- Scarysize