Question

我在kml文件中的弹出气球的Description标签中有Google Chart Visualiation的javascript代码。该图表在浏览器中显示正常但在Google地球中不显示。 kml文件在Google地球中打开，但弹出窗口显示时没有显示屏中缺少的图表。我无法弄清楚为什么这不起作用。

以下是Google地球中的外观：Google Earth Image

示例代码：

＆＃13;

<?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>

＆＃13;

此问题之前已被提出，但未发布任何答案：https://stackoverflow.com/questions/36936891/google-chart-api-not-working-inside-kml-balloon

感谢您的帮助！

Answer 1

出于安全考虑，Google地球会删除气球说明中的所有javascript。常见的解决方法是在地标上侦听点击事件（或更常见的是气球开放事件），然后以编程方式使用完整内容重新创建HtmlDivBalloon。有关详细信息，请查看examples

谷歌图表可视化无法在谷歌地球弹出窗口

1 个答案: