Google maps api 3 Google map resize无法解决模式对话中的部分显示问题_Google Maps Api 3_Simplemodal

Google maps api 3 Google map resize无法解决模式对话中的部分显示问题

google-maps-api-3

Google maps api 3 Google map resize无法解决模式对话中的部分显示问题,google-maps-api-3,simplemodal,Google Maps Api 3,Simplemodal,我知道这个问题已经被提出并回答了很多次，但我似乎无法让建议的解决方案对我有效。。。我在一个SimpleModel对话框中显示一个google地图。在模式对话框之外，地图显示正确。然而，一旦进入模态包装器，在第一次迭代中只显示部分映射，请参见下文。解决方案似乎涉及到将“调整大小”事件绑定到地图，但它对我不起作用第一次迭代：在打开第一次迭代的模式时，“我的地图”将显示，其中部分部分移到顶部RHS，并覆盖在整个地图上。关闭第一个对话框时，屏幕将返回其初始状态第二次和后续迭代：在后续迭

我知道这个问题已经被提出并回答了很多次，但我似乎无法让建议的解决方案对我有效。。。我在一个SimpleModel对话框中显示一个google地图。在模式对话框之外，地图显示正确。然而，一旦进入模态包装器，在第一次迭代中只显示部分映射，请参见下文。解决方案似乎涉及到将“调整大小”事件绑定到地图，但它对我不起作用

第一次迭代：在打开第一次迭代的模式时，“我的地图”将显示，其中部分部分移到顶部RHS，并覆盖在整个地图上。关闭第一个对话框时，屏幕将返回其初始状态

第二次和后续迭代：在后续迭代中，贴图将正确显示，但在关闭时，贴图画布的背景色可见

HTML:

JS:

/*再加上SimpleModel库*/

我已经在JSFIDLE中重新创建了代码-

谁能拯救我的理智…？

谢谢莫勒博士-这是一个明显的进步！虽然仍然只有在第二次迭代中，地图才完全使用标记渲染并正确居中-加上mapCanvas背景仍然顽固可见，但我最终通过添加myMap.map.setCentermapCenter实现了这一点；在对话中打开一个$'mapCanvas'。css'background-color'，'transparent'；对话结束。再次感谢您抽出时间来看这篇文章。参见：jsfiddle.net/redApples/j23ue0n1/44/

<body>
    <button class="modalMap">With Modal </button>
    <button class="nonModalMap">Without Modal </button>
    <div id="mapCanvas"></div>
</body>

#simplemodal-overlay    {background-color:#000;}
#simplemodal-container  {color:#999; background-color:#fff;}
#simplemodal-container a{color:#ddd;}

.modalMap:hover,.nonModalMap:hover {
    cursor:pointer;
}
#mapCanvas {
    position:relative;
    width:480px;height:300px;
}

$(document).ready(function(){
    var myMap;
    $('.modalMap').click(function(){
        buildMap();
        $('#mapCanvas').modal(
            {onOpen:function(dialog){
                dialog.overlay.fadeIn('fast',function(){
                    dialog.data.hide();dialog.container.fadeIn('fast',function(){
                            dialog.data.slideDown('fast');
                    });
                });
            }

            ,onClose:function(dialog){
            dialog.data.fadeOut('fast',function(){
                dialog.container.hide('fast',function(){
                        dialog.overlay.slideUp('fast',function(){
                                $.modal.close();
                                });
                        });
                });
            }
        });
    });

/*  But without the modal the map displays correctly... */
    $('.nonModalMap').click(function(){
        buildMap();
    });
});

function buildMap() {
    var kpl = {
        Place: function (data, map) {

            var self = this;

            this.data = data;

            var coords = data.geo_coords.split(',');
            this.position = new google.maps.LatLng(coords[0], coords[1]);

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

            google.maps.event.addListener(this.marker, 'click', function() { 
                if (self.data.url) {
                    window.location.href = self.data.url
                }
            });
        },
        MapManager: function (div, data) {
            this.map = new google.maps.Map(div, {
                zoom: 15,
                center: new google.maps.LatLng(53.818298, -1.573263),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                backgroundColor: '#cccccc',
                streetViewControl: false,
                navigationControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
            });
            saveCenter = this.map.center;

            this.places = [];

            for (var i in data) {
                if (data.hasOwnProperty(i)) {
                    this.places.push(new kpl.Place(data[i], this.map));
                }
            }
        }
    };

    myMap = new kpl.MapManager($('#mapCanvas').get(0), [{
        url: "mailto:info@????.com", 
        geo_coords: "53.818298, -1.573263",
        name: "Kensington Property LS6"
    }]);

}