Маркеры Mapbox GL JS выходят за пределы карты - PullRequest
Новая
       21

Маркеры Mapbox GL JS выходят за пределы карты

0 голосов
/ 15 июня 2019

Когда карта загружается, все бургеры / маркеры видны (я намеренно установил масштаб, чтобы учесть все бургеры в этом районе.) По какой-то причине, когда я перемещаюсь по карте или увеличиваю / уменьшаю масштаб,бургеры / маркеры следуют за панорамированием и выходят за границы / края карты.Я попытался использовать маркеры по умолчанию и удалить скрипт, который программно добавляет всплывающие окна к маркерам.Я выложу здесь соответствующий код.

enter image description here

Вы можете видеть, что гамбургеры не только появляются за пределами карты, но и растягивают ширину окна при их движении.

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

1 Ответ

0 голосов
/ 19 июня 2019 
.story-map {
   overflow: hidden;
   //...
}

исправляет ваши проблемы.Хотя я также несколько смущен тем, почему mapbox рисует маркеры за пределами своего холста.

...