Question

我知道这个问题已被提出并多次回答，但我似乎无法使建议的解决方案对我有用... 我在简单模式对话框中显示谷歌地图。在模态对话之外，地图正确显示。但是，一旦在模态包装器内部，只有部分地图显示在第一次迭代中（见下文）。该解决方案似乎涉及将'resize'事件绑定到地图，但它对我不起作用......

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

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

HTML：

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

CSS：

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

JS：

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

}

/ *加上simplemodal库... * /

我在jsfiddle中重新创建了代码 - http://jsfiddle.net/redApples/j23ue0n1/32/

任何人都可以拯救我的理智......？

Google地图调整大小不能解决模态对话中的部分显示问题

0 个答案: