Question

我正在使用模态引导程序，我需要加载googlemap，但是我只是按照正常情况加载，并且控制台显示我正在加载的地图但元素检查显示必须加载地图的元素空，像图像

Screenshot of the map container and the result of inspect the container and map variable that show that the map has been loaded

我的地图使用的代码是

var map;

var drawingManager;
var selectedShape;

function initializeMap() {
    var mapOptions = {
        center : new google.maps.LatLng(-16.4237766667, -71.54262),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"),
            mapOptions);
    console.debug(map);
}
$(document).ready(
        function() {
            initializeMap();
            $('#createleaf').click(function() {
                $('#modalFence').modal('show');
            });
            $('#modalFence').on('shown',function(event) {
                //console.debug(map);
                google.maps.event.trigger(map, "resize");
                map.setZoom( map.getZoom() );
                var modal = $(this);
                modal.css('margin-top',(modal.outerHeight() / 2) * -1)
                .css('margin-left',(modal.outerWidth() / 2) * -1);
                return this;
            });
        });

还有一件事，我只是尝试在模态之外创建地图，我的意思是在页面上，它运行良好，问题只是在模态上

我的完整代码位于external link，以便不会使帖子过长

非常感谢

Answer 1

我刚发现错误，这是打字，我注意到粘贴箱中的线条246-256，包含一个具有相同id地图容器的模态，这就是为什么我的模态没有显示的原因map，因为它被装载到第一个具有相同id坦克的容器上给你们所有人

谷歌地图没有加载到bootstrap模式

1 个答案: