如何处理谷歌地图里面的隐藏div（更新图片） [英] how to deal with google map inside of a hidden div (Updated picture)

问题描述

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

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

  map0.onResize（）; 
  

或：

  google.maps.event.trigger（map0，'resize'）
  

任何想法。这里是我看到在显示带有隐藏地图的div后看到的图片。

解决方案

我自己测试了一下，这是我如何接近它。非常简单，让我知道你是否需要任何澄清

HTML

 < div id =map_canvasstyle =width：700px; height：500px; margin-left：80px; >< / DIV> 
< button onclick =displayMap（）>显示地图< /按钮> 
  

CSS

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

Javascript

 <脚本> 
函数displayMap（）
 {
 document.getElementById（'map_canvas'）.style.display =block; 
 initialize（）; 
} 
函数initialize（）
 {
 //创建地图
 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> 
  

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.

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.

解决方案

Just tested it myself and here's how I approached it. Pretty straight forward, let me know if you need any clarification

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>

这篇关于如何处理谷歌地图里面的隐藏div（更新图片）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！