javascript - 谷歌地图模式问题

Question

我正在尝试将谷歌地图显示到 Twitter Bootstrap 模式中。当用户第一次点击按钮 Show map 然后他能够成功地看到 map ，因为我正在生成 map onclick() 函数但是当他关闭模式并重新打开时然后 map 显示不正确， map 的 90% 部分变成灰色，如下所示

我什至尝试了这个解决方法，删除绑定(bind)了 map 的整个 div 并重新生成它，但是这个技巧不太奏效，请告诉我如何解决我的问题。

以下是我调用显示 map 的onclick事件的js函数

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

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

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

希望对您有所帮助。