javascript – Google地图模式问题

我试图显示谷歌地图到Twitter自举模式.
当用户首先点击按钮显示地图时,他能够成功地看到地图,因为我生成地图onclick()函数,但是当他关闭模态并重新打开它,然后地图不正确显示和地图的90％变成灰色如下

我甚至尝试这个解决方法,删除那个地图绑定和重新生成的整个div,但是这个技巧不会很好地让我知道如何解决我的问题.

以下是我的js函数,我正在调用showmap的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,"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);
            }
        });
    }


}

请帮助,

谢谢

解决方法

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

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

希望它有帮助.

原文地址：https://www.jb51.cc/js/154860.html