Question

我尝试使用mapbox.js制作经度和纬度选择器，我需要将此地图放在一个模式框中，当我点击＆＃34;选择位置＆＃34;按钮。但是当这个模态打开时，地图不会完全呈现。

这是我的代码：

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

Answer 1

我不确定您的问题是否已经修复。但是，我也遇到了同样的问题，我使用以下代码修复了它。发布答案，因为它可以帮助其他人。

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

Answer 2

这是使用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();
});

Answer 3

后代注意事项：如果您的地图正在隐藏的div中加载且resize()和invalidateSize()都不起作用，请尝试在overflow: visible元素上设置map内联。< / p>

我在一个bootstrap模式中加载地图，这意味着它在加载时隐藏。当地图在加载时隐藏时，它无法找到其宽度或高度来定义地图元素的边界。设置overflow: visible似乎允许resize()功能通过。这可能会导致布局问题，因为地图将延伸到地图元素的边界之外。您可以尝试使用overflow: hidden将地图包装在另一个div中。

mapbox.js无法在Bootstrap Modal中完全呈现

3 个答案: