谷歌地图+ bootstrap模式不工作调整大小

Question

大家好我有以下问题。谷歌地图没有针对该点进行标注。这是我到目前为止编写的代码。我不知道为什么但是如果你将它放在点击事件

中，这个函数google.maps.event.trigger(map, "resize");就不起作用了

$(function() {
var map;

$('.check-in').click(function(e) {

    var coordX = $(this).data('x'),
            coordY = $(this).data('y');

    initialize(coordX, coordY);

});


function initialize(x, y) {  
    var map_canvas = document.getElementById('map_canvas');

    var myLatlng = new google.maps.LatLng(x, y);
    var map_options = {
        center: myLatlng,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(map_canvas, map_options);


    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    google.maps.event.trigger(map, "resize");
}

}）;

Answer 1

如果我正确理解了您的问题，地图将包含在引导模式中，并且在显示/显示模式后不会调整大小。

要执行此操作，您需要在模式的“显示”事件上触发google maps resize事件。对于Bootsrap v3，以下内容应该有效。对于v2，使用'shown'而不是'shown.bs.modal'

$('#modal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, "resize");
});

Answer 2

我遇到了这样的问题。 我解决了它显示地图 我认为whit js文件有问题冲突