картотека.js не рендеринг полностью внутри Bootstrap Modal

Я пытаюсь сделать выбор долготы и широты, используя mapbox.js и мне нужно, чтобы эта карта была в модальном поле, которое открывается, когда я нажимаю на кнопку "выбрать местоположение". Но когда этот модальный режим открывается, карта не отображается полностью.

Вот мой код: 

<div class="modal fade" id="chooseLocation" tabindex="-1" role="dialog" aria-labelledby="chooseLocation" aria-hidden="true">
    <div class="Cadd-event-modal" style="width: 600px; margin: 0px auto; margin-top: 10%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title Cfont-1">Choose location</h4>
        </div>
        <div class="modal-body" style="width: 500px; margin: 0px auto;">

            <div id='map'></div>
            <div class='map-overlay'>
                <label for='latitude'>latitude</label><br />
                <input type='text' size='5' id='latitude' /><br />
                <label for='longitude'>longitude</label><br />
                <input type='text' size='5' id='longitude' />
            </div>


        </div>
        <div class="model-footer"></div>
    </div>
</div>

Сценарий 

    var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
           .setView([0, 0], 2);

    // get the form inputs we want to update
    var latitude = document.getElementById('latitude');
    var longitude = document.getElementById('longitude');

    var marker = L.marker([0, 0], {
        draggable: true
    }).addTo(map);

    // every time the marker is dragged, update the form
    marker.on('dragend', ondragend);

    // set the initial values in the form
    ondragend();

    function ondragend() {
        var ll = marker.getLatLng();
        latitude.value = ll.lat;
        longitude.value = ll.lng;
    }

И Действие кнопки 

$('#chooseLocation-btn').click(function(){
   $('#chooseLocation').modal('show');
});
3 5
javascript twitter-bootstrap-3 mapbox

3 ответа:

Я не уверен, что ваша проблема уже исправлена или нет. Однако я также столкнулся с той же проблемой, и я исправил ее, используя следующий код. Публикуя ответ, как это может помочь кому-то еще.

$('#chooseLocation').on('shown.bs.modal', function () { // chooseLocation is the id of the modal.
    map.invalidateSize();
 });
9

Вот хороший пример для вкладки, использующей mapbox gl js и map.resize() 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
  map.resize();
});
0

Примечание для потомков: если ваша карта загружается в скрытом div и ни resize(), ни invalidateSize() не работает, попробуйте установить overflow: visible inline на вашем элементе map.

Я загружал карту в загрузочном режиме, что означает, что она скрыта при загрузке. Когда карта скрыта при загрузке, она не может найти свою ширину или высоту, чтобы определить границы элемента карты. Установка overflow: visible, казалось, позволяла функции resize() проходить. Это может вызвать проблемы в компоновке, хотя, как карта будет распространяться за пределы границ элемент карты. Вместо этого вы можете попробовать обернуть карту в другой div с помощью overflow: hidden.

0