<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#one, #two { height: 80%; width: 80%; }
#map_canvas { height: 50%; width: 50%; }
</style>
<!-- or
<style type="text/css">
#map_canvas { height: 500px; width: 500px; }
</style>
-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapCanvas, mapOptions);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="one" data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
<div id="two" role="main">
<div name="map-canvas" id="map-canvas"></div>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
我正在尝试将 google map 放入 jquery 移动页面。
未显示 % 大小的 Google map 。
这是 css 问题吗？
你能告诉我你打算如何解决这个问题吗？
(另一件事是，经过几次试运行，谷歌给我“无效或未经授权的 API key 错误，而其他示例代码根本不使用 key 。谷歌地图 api 是否强制性？)
谢谢
最佳答案
修复 css 选择器以匹配 ID 时工作正常
改变:
#map_canvas { height: 50%; width: 50%; }
^
收件人:
#map-canvas { height: 50%; width: 50%; }
^
不匹配意味着元素没有尺寸，否则使用 % 大小调整并不少见
关于jquery - 谷歌地图和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32702765/