我正在为我们当地的消防员之家编写一个小型 JavaScript 应用程序。该应用程序有点像 powerpoint 等，但是是 html 格式的。
在此应用程序中，我将显示一个谷歌地图，其中包含显示从消防员家到火灾地点的路线。
我使用 jquery 从 http 服务器请求数据。
我的问题是我已经插入了 google 地图 api 的代码，浏览器向我显示带有 google 徽标的地图对象等。但没有地图，只有灰色的背景。使用鼠标，我似乎可以在地图中放大/缩小、滚动等（如果我交互，Firebug 中的数据传输到 google api），但地图不在那里。
我的个人地图 api 密钥已插入，如果我删除它，插件会显示失败。所以我认为这不可能是问题。
jquery 和地图 api 有问题吗？
周围还有其他人遇到这个问题吗？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/standard.css">
<script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.98188, 6.78655),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
map.setZoom(12);
map.setCenter(new google.maps.LatLng(0, 0));
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
}
</script>
</head>
<body>
<div id="site_content">
<div id="head_left" class="background_box">
</div>
<div id="head_center" class="background_box">
<div class="heading"></div>
</div>
<div id="head_right" class="background_box">
<h1 class="date_data"></h1>
<h1 class="time_data"></h1>
</div>
<div class="spacing_data"></div>
<div id="data_box" class="background_box">
<div id="map_canvas" style="width: 100%;height: 100%"></div>
</div>
<div class="spacing_data"></div>
<div id="footer_left" class="background_box">
</div>
<div id="footer_center" class="background_box">
<div class="footer"></div>
</div>
<div id="footer_right" class="background_box">
</div>
</div>
<script>
jQuery.getScript("./js/initialisation.js",function(){initialisation();});
initialize();
</script>
</body>
没有内容，因为这都是在运行时通过 jquery 从服务器加载的，然后插入到 dom 中。
See Mike Williams 在他的 v2 教程中对百分比大小地图的描述
您需要向地图的所有父元素添加定义，以允许浏览器计算非零大小。
工作示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.98188, 6.78655),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
map.setZoom(12);
map.setCenter(new google.maps.LatLng(0, 0));
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
}
google.maps.event.addDomListener(window,"load",initialize);
</script>
</head>
<body>
<div id="site_content" style="width: 100%;height: 100%;">
<div id="head_left" class="background_box" >
</div>
<div id="head_center" class="background_box">
<div class="heading"></div>
</div>
<div id="head_right" class="background_box">
<h1 class="date_data"></h1>
<h1 class="time_data"></h1>
</div>
<div class="spacing_data"></div>
<div id="data_box" class="background_box" style="width: 100%;height: 100%;">
<div id="map_canvas" style="width: 100%;height: 100%;"></div>
</div>
<div class="spacing_data"></div>
<div id="footer_left" class="background_box">
</div>
<div id="footer_center" class="background_box">
<div class="footer"></div>
</div>
<div id="footer_right" class="background_box">
</div>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
