Question

我正在尝试将谷歌地图显示到Twitter引导模式中。当用户第一次点击按钮Show map时，他能够成功地看到地图，因为我正在生成地图onclick()功能，但当他关闭模态并重新打开它时，地图就无法正常显示地图的％部分变为灰色，如下所示

enter image description here

我甚至尝试这种解决方法，删除地图绑定的整个div并重新生成它，但是这个技巧不太好用，让我知道如何解决我的问题。

以下是我的js函数，我正在调用show map的地图事件

function mapp()
{

//google.maps.event.trigger(map, "resize");
  //$("#map_google_canvas").empty();
$("#map_google_canvas").remove();

$("#crmap").append("<div id='map_google_canvas'></div>")


    var myOptions = {
        center: new google.maps.LatLng(54, -2),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);

        var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");


    var geocoder = new google.maps.Geocoder();

    var markerBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode({
            'address': addressArray[i]
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

请帮助，

由于

Answer 1

我有同样的问题。但我发现了模态显示事件的问题。因为它没有使用某个版本的问题所以我只是按照引导模式文档来实现它。

Bootstrap模态映射问题解决方案：

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

最后这对我有用，对某人有帮助。

Answer 2

我正在使用Angular，而ui.bootstrap.collapse AngularUI 指令对我有用的是使用超时。此指令与模态具有相同的问题，因为在新视图完全加载之前未定义地图大小，并且地图显示为灰色区域。我所做的是将此代码添加到打开折叠内容的按钮。也许您可以使用打开模态的按钮使其适应您的情况。

window.setTimeout(function () {
    google.maps.event.trigger(map, 'resize')
}, 0);

希望它有所帮助。

Answer 3

如果您使用的是bootstrap 3，则必须这样做：

function showMap() {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        $('#mapmodal').on('shown.bs.modal', function () {
              google.maps.event.trigger(map, 'resize');
              map.setCenter(new google.maps.LatLng(54, -2));
            });
        $('#mapmodal').modal("show");
}

另外，请确保未将任何max-width或max-height值设置为img-tags。如果您在css样式表中这样做，请将其放在最后：

#map img{
    max-width:none;
    max-height:none;
}

我不确定是否有必要但是为持有地图的div设置高度值应该是一件好事：

<div id="map" style="height:400px"></div>

我从几个stackoverflow讨论中汇总了这个。

Answer 4

由于您要在未定义的宽度元素中加载地图，因此您可以使用此解决方案。

使用latlong初始化地图后，您应该在google.maps上触发调整大小事件

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})

Answer 5

如果您使用的是Angular，则应使用 $ timeout 而不是 setTimeout 。将$ timeout设置为0的函数包装将确保在当前执行上下文完成后执行包装函数。在您的情况下，Google Maps API将仅在模态后重新绘制地图，并且完全呈现包含地图的元素。你不会看到任何灰色区域。

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

Answer 6

可以使用visibility:hidden和visibility:visible代替display:none和display:block。这对我有用。您甚至可以为此编辑模态的CSS。

Answer 7

由于user1012181的答案，我解决了这个问题。我个人也喜欢这种纯CSS解决方案。

div#myModalMap.modal.fade.in{    
    visibility: visible;
}

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}

Answer 8

我也遇到过这个问题并提出了这个简单的解决方案。

等到你的模态完全加载，然后在map函数上设置timeOut事件。

$('#MyModal').on('loaded.bs.modal',function(e){
   setTimeOut(GoogleMap,500);
});

我非常肯定它会在所有情况下都能解决。

Answer 9

我将使用uiGmapIsReady等待dom准备然后强制地图调整大小：

＆＃13;

uiGmapIsReady.promise().then(function () {
    var map = $scope.map.control.getGMap();
    google.maps.event.trigger(map, 'resize');
});

＆＃13;

Answer 10

这就是上面的答案如何帮助但我必须使用onclick调用主函数。

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>

function newMap()

{

function showMap（）{

//your map function

}

    $('#enlargeModal').on('shown.bs.modal', function () {
          var center = fullmap.getCenter();
          google.maps.event.trigger(fullmap, 'resize');
          fullmap.setCenter(center);
    });

showMap（）; }

谷歌地图模式问题

10 个答案: