如何应付 google map 里面隐藏了 div /更新了映像/

赞同来自:

我有同样的问题，我发现了我展示的时候 div, 称呼

google.maps.event.trigger/map, 'resize'/;

, 他似乎对我来说似乎是这个问题。

快网

赞同来自:

我刚刚检查过它，我如何接近这个。非常简单，让我知道你是否需要任何解释

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>

窦买办

赞同来自:

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

如果您没有可访问的变量卡，则必须是第一个元素 /如果你做了愚蠢的事情/ 在

div

, 包含 GMAP.

卫东

赞同来自:

我有地图 Google 在标签内 Bootstrap, 这是错误的。这是我的剂量。

// 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

}/;

石油百科

赞同来自:

如何在调整大小时更新地图 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/;

 }

}

如何倾听大小更改事件

Angular /ng-show 或者 ui-bootstrap collapse

/

直接绑定到元素的可见性，而不是与关联的值 ng-show, 只要 $watch 可以在更新之前工作 ng-show /以便 div 仍然是看不见的/.

scope.$watch/function // { return element.is/':visible'/; },

 function // {

 resize//;

 }

/;

jQuery .show//

使用内置回调

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

Bootstrap 3 mocalnye.

$/'#myModal'/.on/'shown.bs.modal', function// {

 resize//;

}/

喜特乐

赞同来自:

如果您有地图 Google, 通过复制插入 / 插入代码 iframe, 你不想使用 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="[url=https://www.google.com/maps/..."></iframe></div>]https://www.google.com/maps/.. ... gt%3B[/url]

....

下面是地图的示例最初隐藏在初始下载部分中。 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>

詹大官人

赞同来自:

您也可以仅拨打自己的窗口大小更改事件。

Google Maps 自动重启：

window.dispatchEvent/new Event/'resize'//;

郭文康

赞同来自:

我有同样的问题

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/....

 ....

}

我不知道它是一种更方便的方式，但它有效！

三叔

赞同来自:

从 jQuery 你可以做到这样的事情。它帮助我下载地图 Google 在 Umbraco CMS 在一个无法立即可见的选项卡上。

function waitForVisibleMapElement// {

 setTimeout/function // {

 if /$/'#map_canvas'/.is/":visible"// {

 // Initialize your Google Map here

 } else {

 waitForVisibleMapElement//;

 };

 }, 100/;

};



waitForVisibleMapElement//;

奔跑吧少年

赞同来自:

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

HTML

<div class="map-wrap">

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

</div>

CSS

.map-wrap{

 height:0;

 width:0;

 overflow:hidden;

}

Jquery

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

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

裸奔

赞同来自:

或者如果你使用
http://hpneo.github.io/gmaps/
, 称呼：

map.refresh//;

当你的时候 div 将显示。

涵秋

赞同来自:

我假设初始问题与卡相关，在隐藏中初始化 div 页面。我通过在隐藏的尺寸改变卡的大小来解决了类似的问题 div 在初始化后，文档准备好后，无论显示的状态如何。在我的情况下我有 2 映射，一个被显示，另一个在初始化时隐藏，并且我不想每次显示时都初始化卡。这是一个旧的帖子，但我希望他能帮助每个正在寻找的人。

小姐请别说爱

赞同来自:

我发现它适合我：

隐藏：

$/'.mapWrapper'/

.css/{

 visibility: 'hidden',

 height: 0

}/;

展示：

$/'.mapWrapper'/.css/{

 visibility: 'visible',

 height: 'auto'

 }/;

二哥

赞同来自:

作为John Doppelman和 HoffZ, 在显示功能中如下，将所有代码一起收集。 div 或事件 onclick:

setTimeout/function//{

var center = map.getCenter//;

google.maps.event.trigger/map, 'resize'/;

map.setCenter/center/;

}/;

它完全适合我

帅驴

赞同来自:

在选项卡内使用时 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 包含地图的选项卡。

风见雨下

赞同来自:

当您想要显示地图时，请使用此行代码。

$/"#map_view"/.show/"slow"/; // use id of div which you want to show.

 var script = document.createElement/"script"/;

 script.type = "text/javascript";

 script.src = "[url=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";]https://maps.googleapis.com/ma ... 3B%3B[/url]

 document.body.appendChild/script/;

帅驴

赞同来自:

$/"#map_view"/.show/"slow"/; // use id of div which you want to show.

 var script = document.createElement/"script"/;

 script.type = "text/javascript";

 script.src = "[url=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";]https://maps.googleapis.com/ma ... 3B%3B[/url]

 document.body.appendChild/script/;

小姐请别说爱

赞同来自:

我没有那张卡只在隐藏后加载 div 它变得可见。例如，在旋转木马中，它不起作用。

这是我决定将类添加到隐藏的项目以显示它并隐藏使用 position absolute, 然后在下载地图后可视化地图并删除类。

测试中 Bootstrap Carousel.

HTML

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

CSS

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

JS

$/document/.ready/function//{

 // render map //

 google.maps.event.addListenerOnce/map, 'idle', function//{

 $/'.loading'/.removeClass/'loading'/;

 }/;

}

窦买办

赞同来自:

我的决定是：

CSS

:

.map {

 height: 400px;

 border: #ccc solid 1px;

}

jQuery

:

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

卫东

赞同来自:

第一篇文章。我的 googleMap div 它在容器里面 div 从 {display:none}, 直到标签单击。他有同样的问题 OP. 它为我工作：

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

将此代码插入到您的代码末尾，其中将按下选项卡。 container div 你隐藏的打开了 div. 重要的是你的容器 div 必须在拨打电话之前可见 initialize.

我尝试过几个解决方案以及其他页面，但他们对我不起作用。请让我知道这对你有没有用。谢。

风见雨下

赞同来自:

之前添加此代码 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

风见雨下

赞同来自:

显示卡后，我是一个地理编码地址，然后安装卡的中心。

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

 }/;



 }

 }/;

喜特乐

赞同来自:

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="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<script src="[url=https://maps.googleapis.com/maps/api/js?v=3.exp"></script>]https://maps.googleapis.com/ma ... gt%3B[/url]

<button class="open-map" type="button"></button>

<div style="overflow:hidden;height:250px;width:100%;">

<div id="gmap_canvas" style="height:250px;width:100%;"></div>

</div>

如何应付 google map 里面隐藏了 div /更新了映像/

23 个回复

发起人

相关问题

问题状态

如何应付 google map 里面隐藏了 div /更新了映像/

与内容相关的链接

23 个回复

发起人

相关问题

问题状态