CSS 谷歌地图api全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17067196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google maps api full screen
提问by user2313573
Hi i'm working on a project that requires a specific full screen google map to sit between a header and footer. I'm sure the answer is quite simple but thought i'd ask anyway. The project consists of a form where users can drop markers once they've filled in their address etc, not sure if any of the customisation might have interfered or anything...
嗨，我正在从事一个项目，该项目需要特定的全屏谷歌地图位于页眉和页脚之间。我确信答案很简单，但我还是想问问。该项目包含一个表单，用户可以在其中填写地址等后放置标记，不确定是否有任何自定义可能会干扰或任何事情......
When I've worked with the google map API in the past I'd normally just change the css height to 100% but for some reason instead of changing the size it removes the map entirely.
当我过去使用谷歌地图 API 时，我通常只是将 css 高度更改为 100%，但出于某种原因，它没有更改大小，而是完全删除了地图。
#map {
height:500px;
width:1200px;
}
Here's the code.
这是代码。
var map;
var marker;
var Longitude = -1.8822221000000354;
var Latitude = 50.72569620000001;
var zoom = 20;
var bounds = new google.maps.LatLngBounds();
var markers;
var new_marker;
var C;
var popupbubblepath = <%= this.popupbubble.ToString() %>;
var infowindow = new google.maps.InfoWindow();
var ib;
function LoadMap() {
// Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -100 }, { lightness: -100 }
]
},{
featureType: "all",
elementType: "all",
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
//var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var myOptions = {
zoom: zoom,
center: new google.maps.LatLng(Latitude, Longitude),
mapTypeControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
zoomControl: true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.LEFT_BOTTOM
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
回答by James Wagoner
Take a look here http://alistapart.com/article/conflictingabsolutepositionsusing absolute positioning with setting top, left, bottom, right vaules.
在这里查看http://alistapart.com/article/conflictingabsolutepositions使用绝对定位并设置顶部、左侧、底部、右侧 vaules。
#map-canvas{
position: absolute;
top: 100px;
left: 0;
bottom: 100px;
right: 0;
}
Now drag your window to your heart's content and watch your map stay full size. Great when doing responsive designs too.
现在将您的窗口拖动到您满意的位置，并观察您的地图保持完整大小。在进行响应式设计时也很棒。
回答by dma
The Google Maps API docs explain this effect rather neatly:
Google Maps API 文档相当巧妙地解释了这种效果：
Note that some CSS that works within quirks mode is not valid in standards mode. In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels.
请注意，某些在 quirks 模式下工作的 CSS 在标准模式下无效。具体来说，所有基于百分比的大小都必须从父块元素继承，如果这些祖先中的任何一个未能指定大小，则假定它们的大小为 0 x 0 像素。
回答by Smeegs
The issue is with your html not with your javascript. try the follow
问题在于您的 html 而不是您的 javascript。尝试以下
<div id='wrapper'>
<div id='header'>header stuff<div>
<div id='map-canvas'></div>
<div id='footer'>footer stuff<div>
</div>
Add the following css
添加以下css
html, body, #wrapper{
height: 100%;
width: 100%;
}
#header{
height: 100px; //or whatever. Note px not %.
width: 100%;
}
#footer{
height: 100px; //or whatever. Note px not %.
width: 100%;
}
#map-canvas{
height: 100%;
width: 100%;
margin-top: 100px;
margin-bottom: 100px;
}
I didn't get a chance to test this yet, but this should give you an idea of what needs to be done.
我还没有机会测试这个，但这应该让你知道需要做什么。
回答by Richard Askew
I think the problem isn't with the map as much but with the containing div. If you set the height of the div to 100% make sure that all containing divs have a height defined. You can tell if this is the problem by putting a border around the div, you may see that the height is the problem.
我认为问题不在于地图，而在于包含的 div。如果将 div 的高度设置为 100%，请确保所有包含的 div 都定义了高度。您可以通过在 div 周围放置边框来判断这是否是问题，您可能会看到高度是问题。
It would be easier to fix if you can get it up for us to play with.
如果你能把它拿出来让我们玩，它会更容易修复。
回答by Florent Vielfaure
When you want to have an empty divthat take all the screen in height, you have to define the min-heightvalue, as below :
当您想要一个div占据所有屏幕高度的空时，您必须定义该min-height值，如下所示：
html, body {
height: 100%;
}
#map {
min-height: 100%;
}
But again, that's not really related to 'google-maps-api-3'...
但同样，这与“google-maps-api-3”并没有真正的关系......
