如何处理隐藏div内的谷歌地图(更新图片)

Question

我有一个页面,谷歌地图首先在隐藏的div内.然后我点击链接后显示div,但只显示地图的左上角.

我尝试在点击后运行此代码:

    map0.onResize();

要么:

  google.maps.event.trigger(map0, 'resize')

有任何想法吗.这是我在看到隐藏地图的div后看到的图像.

Answer 1

我遇到了同样的问题,并发现当显示div时,呼叫google.maps.event.trigger(map, 'resize');它似乎为我解决了问题.

Answer 2

我自己测试过,这就是我接近它的方式.非常直截了当,如果您需要任何澄清,请告诉我

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

使用Javascript

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng( 0.0, 0.0 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

Answer 3

google.maps.event.trigger($("#div_ID")[0], 'resize');

如果你没有可用的变量映射,它应该是div包含GMAP 的第一个元素(除非你做了一些愚蠢的事情).

Answer 4

我在Bootstrap选项卡中有一个Google地图,但没有正确显示.这是我的修复.

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

Answer 5

调整div大小时如何刷新地图

仅仅打电话是不够的google.maps.event.trigger(map, 'resize');你也应该重置地图的中心.

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

如何监听resize事件

角度(ng-show或ui-bootstrap崩溃)

直接绑定到元素的可见性而不是绑定到ng-show的值,因为$ watch可以在ng-show更新之前触发(因此div仍然是不可见的).

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show()

使用内置回调

$("#myMapDiv").show(speed, function() { resize(); });

Bootstrap 3模态

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

Answer 6

也可以只触发本机窗口调整大小事件.

Google地图会自动重新加载:

window.dispatchEvent(new Event('resize'));

Answer 7

我有同样的问题,google.maps.event.trigger(map, 'resize')不适合我.

我做的是在看到div...... 之后放一个计时器来更新地图

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

我不知道这是否是更方便的方式,但它的工作原理!

Answer 8

如果您通过复制/粘贴iframe代码插入了Google地图,并且您不想使用Google Maps API,那么这是一个简单的解决方案.只需在显示隐藏地图时执行以下javascript行.它只需要iframe HTML代码并将其插入到同一位置,因此它再次呈现:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery版本:

$('#map-wrapper').html( $('#map-wrapper').html() );

HTML:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

以下示例适用于最初隐藏在Bootstrap 3选项卡中的地图:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>