谷歌地图通常显示为静态 html。 但是我们需要在谷歌地图上动态显示数据，所以我们需要使用 javascript 将其作为模板嵌入到另一个模板中。 它似乎是空白的。网页源码显示已经调用了'initialize()'函数但是没有出现 map
这里是index.html
<body>
<div class = "heatmap">
{% include 'origin.html' %}
</div>
</body>
这里是origin.html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
// Adding 500 Data Points
var map, pointarray, heatmap;
var taxiData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586)
];
function initialize() {
alert('map appears!')
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray});
heatmap.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<div id="map-canvas">this is the map</div>
这是css文件:
html{
height: 90%;
margin: 0px;
padding: 0px;
}
body {
height: 90%;
margin: 0px;
padding: 0px;
font-family: Verdana, Helvetica, sans-serif;
background-color: #DDDDDD;
}
#map-canvas {
height: 90%;
margin: 0px;
padding: 0px;
}
如果这很重要，我们将在 Google App Engine 应用程序中使用 jinja2 模板。
最佳答案
.heatmap需要一个高度，否则#map-canvas的90%高度会被计算为0px
关于javascript - 如何将谷歌地图作为模板动态嵌入到另一个模板中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23039055/