jQuery 如何处理隐藏 div 内的谷歌地图（更新图片）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4064275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to deal with google map inside of a hidden div (Updated picture)
提问by leora
i have a page and a google map is inside a hidden div at first. I then show the div after i click a link but only the top left of the map shows up.
我有一个页面，谷歌地图起初在一个隐藏的 div 中。然后我在单击链接后显示 div，但只显示地图的左上角。
i tried having this code run after the click:
我尝试在单击后运行此代码：
map0.onResize();
or:
或者：
google.maps.event.trigger(map0, 'resize')
any ideas. here is an image of what i see after showing the div with the hidden map in it.
有任何想法吗。这是我在显示带有隐藏地图的 div 后看到的图像。
采纳答案by Philar
Just tested it myself and here's how I approached it. Pretty straight forward, let me know if you need any clarification
只是自己测试了它，这就是我接近它的方式。非常直接，如果您需要任何说明，请告诉我
HTML
HTML
<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>
CSS
CSS
<style type="text/css">
#map_canvas {display:none;}
</style>
Javascript
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>
回答by Eric
I was having the same problem and discovered that when show the div, call google.maps.event.trigger(map, 'resize');and it appears to resolve the issue for me.
我遇到了同样的问题，发现当显示 div 时，调用google.maps.event.trigger(map, 'resize');它似乎为我解决了问题。
回答by C S N
google.maps.event.trigger($("#div_ID")[0], 'resize');
If you don't have variable map available, it should be the first element (unless you did something stupid) in the divthat contains GMAP.
如果您没有可用的变量映射，它应该是div包含 GMAP的第一个元素（除非您做了一些愚蠢的事情）。
回答by Simon East
I had a Google map inside a Bootstrap tab, which wasn't displaying correctly. This was my fix.
我在 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
});
回答by civmeup
How to refresh the map when you resize your div
调整 div 大小时如何刷新地图
It's not enough just to call google.maps.event.trigger(map, 'resize');You should reset the center of the map as well.
仅仅调用是不够的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);
}
}
How to listen for the resize event
如何监听调整大小事件
Angular (ng-show or ui-bootstrap collapse)
角度（ng-show 或 ui-bootstrap 折叠）
Bind directly to the element's visibility rather than to the value bound to ng-show, because the $watch can fire before the ng-show is updated (so the div will still be invisible).
直接绑定到元素的可见性而不是绑定到 ng-show 的值，因为 $watch 可以在 ng-show 更新之前触发（因此 div 仍然不可见）。
scope.$watch(function () { return element.is(':visible'); },
function () {
resize();
}
);
jQuery .show()
jQuery .show()
Use the built in callback
使用内置回调
$("#myMapDiv").show(speed, function() { resize(); });
Bootstrap 3 Modal
Bootstrap 3 模态
$('#myModal').on('shown.bs.modal', function() {
resize();
})
回答by Gustavo
If you have a Google Map inserted by copy/pasting the iframe code and you don't want to use Google Maps API, this is an easy solution. Just execute the following javascript line when you show the hidden map. It just takes the iframe HTML code and insert it in the same place, so it renders again:
如果您通过复制/粘贴 iframe 代码插入了 Google 地图，并且您不想使用 Google Maps API，这是一个简单的解决方案。显示隐藏地图时只需执行以下 javascript 行。它只需要 iframe HTML 代码并将其插入到同一位置，因此它再次呈现：
document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;
jQuery version:
jQuery 版本：
$('#map-wrapper').html( $('#map-wrapper').html() );
The HTML:
HTML：
....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....
The following example works for a map initially hidden in a Bootstrap 3 tab:
以下示例适用于最初隐藏在 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>
回答by Philip
It's also possible to just trigger the native window resize event.
也可以只触发本机窗口调整大小事件。
Google Maps will reload itself automatically:
谷歌地图会自动重新加载：
window.dispatchEvent(new Event('resize'));
回答by Carlos
I had the same issue, the google.maps.event.trigger(map, 'resize')wasn't working for me.
我有同样的问题，这google.maps.event.trigger(map, 'resize')对我不起作用。
What I did was to put a timer to update the map after putting visible the div...
我所做的是在放置可见后放置一个计时器来更新地图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(....
....
}
I don't know if it's the more convenient way to do it but it works!
我不知道这是不是更方便的方法，但它有效！
回答by Dennis
With jQuery you could do something like this. This helped me load a Google Map in Umbraco CMS on a tab that would not be visible from right away.
使用 jQuery，你可以做这样的事情。这帮助我在 Umbraco CMS 中加载了一个无法立即看到的选项卡上的 Google 地图。
function waitForVisibleMapElement() {
setTimeout(function () {
if ($('#map_canvas').is(":visible")) {
// Initialize your Google Map here
} else {
waitForVisibleMapElement();
};
}, 100);
};
waitForVisibleMapElement();
