热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使地图容器在
标签中全屏显示-Full-screenDisplayofMapContainerin

我在一个标签中嵌入了一个地图,如何设置使其“map_canvas”在标签下的宽度和高度都达到100%?

我正在尝试在一个

标签中嵌入一个地图,目标是让“map_canvas”在标签下的宽度和高度都能拉伸至100%。请问是否有办法通过CSS或Javascript来实现这一目标?


具体来说,我的页面结构如下:




返回

谷歌地图






期待您的建议!


感谢!



解决方案



#1





1  


一种方法是使用Javascript来动态计算并设置

的宽度和高度,这种方法可以确保地图容器完美地适应屏幕尺寸。


例如,您可以使用以下Javascript代码片段来实现这一点:


function resizeMap() {
var mapCOntainer= document.getElementById('map_canvas');
mapContainer.style.width = '100%';
mapContainer.style.height = window.innerHeight + 'px';
}
window.Onload= resizeMap;
window.Onresize= resizeMap;

另一种方法是通过CSS来设置100%的宽度,但这对于高度来说是不够的,因为CSS本身无法直接控制元素的高度为视窗的100%。不过,可以通过设置父元素的高度为100%来间接实现:


例如,在CSS中添加如下样式:


#gmap, #gmap > div {
height: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
}

希望这些方法能帮助到您!如果您有任何其他问题,欢迎继续提问。




推荐阅读
author-avatar
常依sunrise
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有