如何处理谷歌地图里面的隐藏div(更新图片) [英] how to deal with google map inside of a hidden div (Updated picture)
本文介绍了如何处理谷歌地图里面的隐藏div(更新图片)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个页面,谷歌地图首先在隐藏的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屋!
查看全文