Javascript 谷歌地图模式问题

我试图在Twitter引导模式中显示google地图。 当用户第一次单击按钮

Show map

时，当我生成map

onclick（）

函数时，他能够成功地看到地图，但当他关闭模式并重新打开它时，地图无法正确显示，地图的90%部分变为灰色，如下所示

我甚至尝试了这个解决方法，删除了绑定地图的整个div并重新生成它，但是这个技巧并不奏效，请告诉我如何解决我的问题

下面是我的js函数，我正在调用showmap的onclick事件

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


}

函数mapp（）
{
//google.maps.event.trigger（map，“resize”）；
//$（“#地图_谷歌_画布”）.empty（）；
$（“#映射_谷歌_画布”）.remove（）；
$（“#crmap”）。追加（“”）
变量myOptions={
中心：新google.maps.LatLng（54，-2），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map\u google\u canvas”），myOptions）；
var addressArray=新阵列（“英国伦敦”、“英国布伦特伍德伦敦路”、“英国布伦特伍德”）；
var geocoder=new google.maps.geocoder（）；
var markerBounds=new google.maps.LatLngBounds（）；
对于（变量i=0；i

请帮忙

---

谢谢

因为您正在以尚未定义的宽度元素加载地图，所以您有了此解决方案

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

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

在使用latlong初始化map之后，应该在google.maps上触发一个resize事件

$（'.modal'）。在（'show'，函数（）{
//还要重新定义中心
map.setCenter（新的google.maps.LatLng（54，-2））；
google.maps.event.trigger（映射，'resize'）；
})

我正在使用AngularUI，刚刚对我起作用的是

ui.bootstrap.collapse

AngularUI指令使用超时。此指令与modals具有相同的问题，因为在新视图完全加载之前不会定义贴图大小，并且贴图显示为灰色区域。我所做的是将此代码添加到打开折叠内容的按钮。也许你可以用打开模态的按钮来调整它以适应你的情况

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

---

希望对您有所帮助。

如果您使用的是Angular，您应该使用$timeout而不是setTimeout。 将$timeout设置为0包装函数将确保在当前执行上下文完成后执行包装函数。在您的情况下，GoogleMapsAPI只会在模态和包含贴图的元素完全渲染后重新绘制贴图。你不会看到任何灰色区域

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

---

我也有同样的问题。但是我发现了一个事件的问题。由于它不能处理某些版本的问题，所以我只是按照引导模式文档来实现它

引导模式映射问题解决方案：

$(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));
  });
});

---

最后，这对我有效，它可以帮助某人。

可以使用

可见性：隐藏
和
可见性：可见
来代替
显示：无
和
显示：块
。这对我有用。您甚至可以为此编辑模式的CSS
 如果使用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");
}

还要确保没有将任何“最大宽度”或“最大高度”值设置为img-标记。如果您在css样式表中这样做，请将以下内容放在末尾：

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

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

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



我从几次stackoverflow讨论中总结了这个问题。
我也遇到了这个问题，并提出了这个简单的解决方案

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

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

等待模态完全加载，然后设置映射函数上的超时事件

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

我非常确信它在任何情况下都会成功。
多亏了user1012181的回答，我解决了这个问题。我个人也喜欢这个纯CSS解决方案

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

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

我将使用uiGmapIsReady等待dom就绪，然后强制地图调整大小：


uiGmapIsReady.promise（）.then（函数（）{
var map=$scope.map.control.getGMap（）；
google.maps.event.trigger（映射，'resize'）；
});以上的答案就是这样起作用的，但我必须使用
onclick
调用主函数

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

function newMap()

}

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

showMap（）；
}
我很难过地说，这是完全正常和预期的行为。有很多页面，谷歌地图“搞乱了”并在隐藏->显示->隐藏元素上显示它们。此外，谷歌地图并不是每次都搞砸，它很可能会搞砸。唯一的解决方案是在映射的容器设置为show/visible之前重新生成映射，这里是引导模式。当然，您只需运行一次
addressArray
-循环，并将地理编码器结果存储在一个查找表中！我不知道触发器。这对将来会有很大帮助！已对您的问题和找到的答案进行了投票。非常感谢。你可以考虑回答你自己的问题，并把它标记为被接受。建议在stackoverflow执行此步骤。其他人可能正在寻找该问题的正确答案。@davidkonrad我使用了使用“不可见”的技巧，而不是隐藏我的模态并仅更改此属性，它对我有效。。如果您查看评论，OP提到的解决了他的问题。无论如何，没有问题，这是一个完整的例子。很好用！试过