我们正在构建一个包含所有主页的谷歌地图的网络应用程序。 它看起来很棒但是当我在另一台计算机上打开它时,分辨率或屏幕尺寸略有不同,地图大小也不会相应改变。
我尝试过使用"%"而不是" px"但情况更糟,地图消失了。
我找到了一些使用"!important"但它对我不起作用,无法弄清楚原因。
这是我的地图CSS(层叠样式表):
#google-container {
position: relative;
width: 100%;
height: 200px;
background-color: #e7eaf0;
}
@media only screen and (min-width: 768px) {
#google-container {
height: 300px;
}
}
@media only screen and (min-width: 1170px) {
#google-container {
height: 710px;
}
}
#cd-google-map {
position: relative;
}
#cd-google-map address {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 1em 1em;
background-color: rgba(211, 104, 104, 0.9);
color: white;
font-size: 13px;
font-size: 0.8125rem;
}
@media only screen and (min-width: 768px) {
#cd-google-map address {
font-size: 15px;
font-size: 0.9375rem;
text-align: center;
}
}
这是我的html(地图正在main.js文件中构建):
<section id="cd-google-map">
<div id="google-container"></div>
<div id="cd-zoom-in"></div>
<div id="cd-zoom-out"></div>
<div id="addNewReviewButton" ng-controller="NavCtrl">
<button style="border-color: transparent; background-color: transparent;">
<ng-md-icon icon="add_circle" style="fill: #d43f3a" size="120" ng-click="addNewReview()"></ng-md-icon>
</button>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAl8UrwCupLjkdVfx_IXugrryC8ES32Cz8&language=iw&?v=3.exp&sensor=false&libraries=places"></script>
<script src="js/main.js"></script>
答案 0 :(得分:4)
您可以使用vw(视口宽度)和vh(视口高度)代替% 喜欢:
height: 100vh;
答案 1 :(得分:2)
看起来你的问题就是这个CSS:
@media only screen and (min-width: 768px) {
#google-container {
height: 300px;
}
}
如果删除它,则可以使用百分比大小调整(或vh / vw大小调整)
答案 2 :(得分:1)
您可以使用绝对定位使整个容器适合浏览器的边缘:
<强>标记强>
<div class="map">
the map is here ...
</div>
<强> CSS 强>
.map{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
答案 3 :(得分:1)
这为您提供全屏地图布局。
parent设置为relative,然后将IFRAME视为具有position:absolute
值的父级的子级。
padding-bottom: (height*100)/width
;
例如:
padding-bottom: 56.22% /*(768*100)/1366) - common screen resolution.*/
.table {
width: 100%;
height: 100%;
position: relative;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 100%;
padding-bottom: 56.22%;
}
&#13;
<div class="parent">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3774.2135216027964!2d72.83238461524519!3d18.921940761713312!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7d1c73993eebd%3A0x9e8c8bfbd74a913a!2sGateway+of+India%2C+Apollo+Bandar%2C+Colaba%2C+Mumbai%2C+Maharashtra+400001!5e0!3m2!1sen!2sin!4v1450701184011"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
&#13;
答案 4 :(得分:0)
我刚刚解决了你需要改为:
height: 100vh;
并进行以下更改:
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
希望尽可能地帮助你。