height = 100％不呈现google maps api [英] height=100% not rendering the google maps api
问题描述
我尝试使用Google Maps API。我已经得到了一个授权密钥，并粘贴在他们给我们的示例代码，但我不能使地图渲染，即使他们告诉我，以确保我的高度100％在我的地图div和身体。
I am trying to use the Google Maps API. I have gotten a authorization key and pasted in the sample code they gave us, but I can't make the map render even when they tell me to make sure I put a height of 100% on both my map div and the body.
我已经试过，它不会显示。如果我把一个500像素的高度在地图div，并给予身体的100％的高度，它的工作原理...但我想知道为什么100％的高度不会不会呈现。我正在复制Google文档（ https://developers.google。 com / maps / documentation / javascript / examples / map-simple ）给我和视频告诉我仔细检查。帮助，我疯狂地好奇为什么100％的高度不会渲染。我想使用百分比，以便它可以在移动设备上兼容！
I have tried and it won't show up. If I put a 500px height on the map div, and give the body a 100% height it works... but I want to know why height of 100% will not will not render. I am copying exactly what the Google documentation (https://developers.google.com/maps/documentation/javascript/examples/map-simple) is giving me and what the video tells me to double check. HELP, i am insanely curious on why 100% height won't render. I want to use percentages, so that it can be compatible on mobile devices!
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Ice Cream</title>
<!-- Google Docs-->
<!-- external CSS link -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id='map_canvas'> HELLOooo <!--dimensions of map are set in CSS-->
</div>
<!-- external CSS link -->
<!-- javascript -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDCh7Odrr4RUUiAHMyDtfwC2NtySy-64"></script>
<script src="js/index.js"></script>
</body>
</html>
body, #map_canvas{
margin:0;
padding:0;
height: 100%;
}
$(function() {
console.log("hi");
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
console.log('map');
});
推荐答案
100％无效的原因是地图需要以特定比例（固定的 width & height ）向您发送图片。
The reason why 100% doesn't work is because the map needs to send you images at a specific ratio (fixed width & height). Now I might be guessing here, but that's what I think happens.
因为我有一个类似的问题，我的地图被隐藏在一个标签内，我写这个函数计算宽度&高度或比率。然后无论大小的容器，地图是在，它会调整。它使用jQuery，所以我只是想我会发布它的想法。
Since I had a similar problem, where my map was hidden inside a tab, I wrote this function to calculate the width & height or a ratio. Then whatever size of the container, the map was in, it would adjust. It uses jQuery so I just thought I'd post it to get the idea.
/**
* Calculate the dimensions
*/
calculateMap: function () {
var self = this,
parent = this.map.parent(), // jQuery obj
w, h, id, el;
// if the container of your map is visible and wrapped it has a certain width and height...
// if it also has 100% height, it could be collapsed (not wrapped)
// so you ask the google maps api to load images at 500px width and 0height?
// if the parent has 0height, the ratio helps to set it properly
// with debug tools (F12) you can see the parent if it lights up
if (parent.is(':visible')) {
w = parent.outerWidth(false);
h = w * this.settings.options.mapRatio; // 4/3 | 16/9
this.map.css({ width: w, height: h });
} else {
// if your map is invisible after load...
id = this.onParent.prop('id'); // this id references my tab
el = this.onParent.prevAll().find('a[href=#' + id + ']'); // trigger of the tab
// add click event once
el.one(this.settings.events.onParent, function() {
setTimeout(function() {
self.activate(); // goes back to calculateMap()
}, 200);
}.bind(this));
}
},
如果触发 c> c>在调整大小事件中，您将采取自适应的方式。
If you trigger calculateMap on the resize event, you'll have a responsive approach.
快速google显示我这种方法 ...注意固定宽度和高度。
Also a quick google showed me this approach ... notice the fixed width and height on the iframe.
简而言之：
- 高度在css给你最干净的解决方案。您可以在
％或min-height中使用清除，填充 - 对于动态/事件加载，我建议JavaScript或jQuery / li>
- 或使用iframe和固定的宽度和高度
- fixed width and height in css gives you the cleanest solution. you might be able to use a clearfix,
paddingin%ormin-heightinpxto gain dimension if that works out. - For dynamic/event loading I suggest JavaScript or jQuery
- or with an iframe and a fixed width and height
这篇关于height = 100％不呈现google maps api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
