代码之家 › 专栏 › 技术社区 › leora Matt Lacey

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

google-maps-api-3 google-maps jquery

127

leora Matt Lacey · 技术社区 · 14 年前

我有一个页面,一开始谷歌地图就在一个隐藏的分区内。然后,我单击链接后显示DIV,但只有地图的左上角显示。

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

map0.onResize();
< /代码> 

或:

google.maps.event.trigger(map0,'resize')
< /代码> 

任何想法。这是显示DIV后看到的图像,其中包含隐藏的地图。=

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

    map0.onResize();


或:

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


任何想法。这是我在显示了隐藏地图的DIV后看到的图像。

23 回复 | 直到 7 年前

103

Rohan Khude 7 年前

我自己测试过了,我是这样接近它的。直截了当地说,如果你需要澄清的话,请告诉我。

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>

125

Brant Olsen Honorable Chow 11 年前

我也遇到了同样的问题,发现当显示DIV时,调用 google.maps.event.trigger(map, 'resize'); 看来我能解决这个问题。

icktoofay pcp 12 年前

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

如果没有可用的变量映射,它应该是 div 包含gmap。

Simon E. pbs 11 年前

我在一个引导标签中有一个谷歌地图,显示不正确。这是我的解决办法。

// 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
});

civmeup 9 年前

如何在调整分区大小时刷新地图

仅仅打电话是不够的 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);
    }
}

如何监听调整大小事件

角度(ng show或ui bootstrap collapse)

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

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

显示()

使用内置回调

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

引导3模式

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

Brant Olsen Honorable Chow 11 年前

我也有同样的问题, 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(....
    ....
}

我不知道这是不是更方便的方法,但它是有效的!

Guscie 10 年前

如果您通过复制/粘贴iframe代码插入了Google地图,并且不想使用Google地图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>
....

以下示例适用于最初隐藏在引导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>

Philip 8 年前

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

谷歌地图将自动重新加载:

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

Dennis 10 年前

使用jquery,您可以做类似的事情。这有助于我在UmbracoCMS中加载一个标签上的谷歌地图,而这个标签从现在起是看不见的。

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

midishero 11 年前

我的解决方案非常简单有效:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>

CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}

滑动分页

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

Eric Saboia 10 年前

或者如果你使用 gmaps.js ,呼叫:

map.refresh();

当显示您的DIV时。

KYLO 12 年前

我猜最初的问题是用一个地图,在页面的一个隐藏的部分初始化。我解决了一个类似的问题,在文档准备好后,无论地图的显示状态如何,初始化之后,我都会在隐藏的分区中调整地图的大小。在我的例子中,我有两个映射,一个显示,一个在初始化时隐藏,我不想每次显示映射时都初始化它。这是一个旧的帖子,但我希望它能帮助任何正在寻找的人。

Victor S 9 年前

我发现这对我有用:

隐瞒:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

显示:

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

Nirmal 8 年前

如果在bootstrap v3选项卡中使用,则应使用以下选项:

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

在哪里? tab-location 是包含映射的选项卡的ID。

Victor Tarango 8 年前

正如John Doppelmann和Hoffz所指出的,在显示函数或onclick事件的DIV中,将所有代码放在一起,如下所示:

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

它对我来说非常有效

avcajaraville 10 年前

我的解决方案是:

CSS:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery:

$('.map').width(555); // width of map canvas

user1912899 10 年前

我不希望地图只在隐藏的分区可见后才加载。例如,在旋转木马中,这并不真正起作用。

我的解决方案是将类添加到隐藏元素中,以取消隐藏它并用绝对位置隐藏它,然后渲染映射,并在加载映射后移除类。

在引导传送带中测试。

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

.loading { display: block; position: absolute; }

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

Ravi Darji 10 年前

要显示地图时,请使用这行代码。

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

Ravi Darji 10 年前

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

Leonard 8 年前

第一篇文章。我的googlemap div在一个container div中,只有在单击tab键后才会显示为“无”。和OP有同样的问题。这对我很有效:

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

将此代码粘贴在单击container div选项卡的代码内部和末尾,并显示隐藏的div。重要的是,在调用initialize之前,必须先显示container div。

我尝试了许多在这里和其他页面提出的解决方案,但它们对我不起作用。如果这对你有用,请告诉我。谢谢。

Balibrera 8 年前

在DIV之前添加此代码或将其传递到JS文件:

<script>
    $(document).on("pageshow","#div_name",function(){
       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("div_name"), myOptions);
   }


</script>

此事件将在加载DIV后触发,因此它将刷新映射内容,而不必按F5。

Andrew 7 年前

显示地图后,我将对地址进行地理编码,然后设置地图中心。这个 google.maps.event.trigger(map, 'resize'); 不适合我。

我不得不使用 map.setZoom(14);

代码如下:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });

-1

Håken Lid 8 年前

function init_map() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0.0, 0.0)
  });
  infowindow = new google.maps.InfoWindow({
    content: 'content'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

jQuery(window).resize(function() {
  init_map();
});
jQuery('.open-map').on('click', function() {
  init_map();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

<button type="button" class="open-map"></button>
<div style='overflow:hidden;height:250px;width:100%;'>
  <div id='gmap_canvas' style='height:250px;width:100%;'></div>
</div>