比较来自世界各地的卖家的域名和 IT 服务价格

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

我有一个页面,第一个地图 google 位于隐藏的内部 div. 然后我展示 div 单击链接后,只出现卡的左上角。

点击后,我试图运行此代码:


map0.onResize//;


或者:


google.maps.event.trigger/map0, 'resize'/


有任何想法吗。 这是我在节目后所看到的图像 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>

要回复问题请先登录注册