目前在学校里，我正在与Googleappengine，Googledatastore，Googlemaps和Chart.js合作进行项目。在为我的应用程序构建Basic Gui时，我遇到了一个问题，我是否需要您的帮助来理解为什么会发生这种情况，并且可能需要一些技巧来进行修复或解决。
用遍布世界各地的景点构建一个逼真的Java温度模拟器。通过http将数据发送到appengine，并将其存储在数据存储区中。构建一个网页，以显示温度图以及您在Googlemaps中使用图表存储的数据。
在第一次单击标记后加载页面后，仅加载html的画布，并且显示“ SCRIPT5007：无法获取未定义或空引用的属性'getContext' 。在标记上的第二次单击，一切正常。之后，我可以根据需要关闭并打开标记信息窗口。
http://1-dot-mm-gae-ntb.appspot.com/Temperaturemap.html
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>
我会说，markersinfowindow上的初始加载的加载速度存在问题。 Chart.js尝试将图表写入画布，甚至在markerinfowindow知道里面有一个画布的情况下。但是直到1个月前，我才真正接触过html和js，这是我第一次接触地图，appengine，图表和数据存储，所以我真的一无所知（John Snow）。
我很期待听到一些经验比我更好的人的解释。