Mapbox GL JS 标记在地图外

Question

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

你可以看到汉堡不仅出现在地图之外，而且在移动时会拉伸 window 的宽度。

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

Answer 1

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

解决了您的问题。尽管我对 mapbox 为什么绘制超出其 canvas.

的标记也有些困惑

Mapbox GL JS 标记在地图外

Mapbox GL JS markers go outside map

marker

mapbox-gl-js

mapbox-marker