我正在使用Flask(Python(构建一个应用程序，并尝试使用Google Marker GeoChart。
以下脚本作为独立的html文件工作正常：
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': google_map_api_key
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
但一旦我尝试通过FLASK/Python显示，标记就不会显示：在我的index.html文件中，我有
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript" src="static/js/google-charts.js"></script>
<div id="bubble_div" style="width: 1000px; height: 500;"></div>
<script type='text/javascript'> bubble_chart(document.getElementById('bubble_div'));</script>
其中文件google-charts.js包含以下javascript函数：
function bubble_chart(getElementById){
google.charts.load('current', {
'packages': ['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': google_map_api_key
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(getElementById);
chart.draw(data, options);
};
}
当查看检查时，我看到以下错误：
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
js?key=YOUR_KEY_HERE:55 Google Maps JavaScript API error: InvalidKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error
_.nd @ js?key=YOUR_KEY_HERE:55
起初，我认为这是API的关键问题，但由于它适用于html文件，我怀疑API是一个问题。有什么建议吗？
非常感谢。
我自己发现了，我想我应该分享。发生的事情是，由于我在google-charts.js中有几个类似于bubble_chart((的函数，我一直在重复调用同一个API键；即以下语句出现在每个函数中。这是导致错误的原因。我把下面的部分移到index.html头上，问题就解决了。
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': google_map_api_key
});
所以，请尝试只调用一次API密钥。