Question

谷歌地图通常显示为静态HTML。但我们需要在谷歌地图上动态显示数据，因此我们需要使用javascript将其作为模板嵌入到另一个模板中。它似乎是空白的。网页的源代码显示已调用'initialize（）'函数但未显示地图

这里是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模板。

Answer 1

.heatmap需要一个高度，否则#map-canvas的90％ - 高度将计算为0px

如何在另一个模板中动态嵌入谷歌地图作为模板

1 个答案: