谷歌图表可视化在谷歌地球弹出窗口中不起作用

我在 kml 文件中弹出气球的描述标签中有用于 Google 图表可视化的 JavaScript 代码。图表在浏览器中显示正常，但在 Google 地球中显示不正常。 kml 文件将在 Google 地球中打开，但弹出窗口显示时没有图表，而图表在显示中缺失。我不知道为什么这不起作用。

这是它在谷歌地球中的样子：谷歌地球图像

示例代码：

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2' xmlns:gx='http://www.google.com/kml/ext/2.2'
xmlns:kml='http://www.opengis.net/kml/2.2' xmlns:atom='http://www.w3.org/2005/Atom'>
<Document>
<name>Chart Test</name>
<Placemark id='ABBEY'>
<Snippet maxLines='0'></Snippet>
<description>
<![CDATA[
<head>
<style type=text/css>
p {text-align:left; font-family:'Comic Sans MS'; font-size:10pt; line-height:120%; padding:0pt; margin-top:0pt;}
.center {text-align:center;}
.space {margin-top:6pt;}
</style>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
 ['Task', 'Hours per Day'],
 ['Work',     11],
 ['Eat',      2],
 ['Commute',  2],
 ['Watch TV', 2],
 ['Sleep',    7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<div style='height:300px; width:350px; overflow:auto'>
<body>
<table colspan='1'>
<tr>
<td colspan='1' align='center'>
<h2 align='center'>Chart Test</h2>
</td>
</tr>
<tr>
<td colspan='1' align='center'>
<h2>ABBEY</h2>
</td>
</tr>
<tr>
<td colspan='1' align='center'>
<div id='piechart_3d' style='width: 150px; height: 150px;'></div>
</td>
</tr>
<tr>
<td colspan='1' align='center'>
<h3 class='center'>Chart should appear in space above</h3>
</tr>
</table>
</body>
</div>
]]>
</description>
<Point>
<coordinates>-73.059764,44.03325</coordinates>
</Point>
</Placemark>
</Document>
</kml>

这个问题之前被问过，但没有发布答案：https://stackoverflow.com/questions/36936891/google-chart-api-not-working-inside-kml-balloon

感谢您的帮助！

出于安全目的，Google 地球会删除气球描述中的任何 JavaScript。一种常见的解决方法是侦听地标上的单击事件（或更普遍的气球打开事件），然后以编程方式使用完整内容重新创建 HtmlDivBalloon。有关更多详细信息，请查看 http://code.google.com/apis/earth/documentation/balloons.html#getballoonhtmlunsafe

相关内容

最新更新

热门标签：