javascript - 使用 Java API for KML 在 KML 描述气球中调用 REST API 的链接？

Question

我正在使用 Java API for KML 创建一个包含多个地标的 KML 文件，每个地标都有一个描述弹出窗口。在弹出窗口中，我想链接到我在本地主机上运行的 REST API。

我尝试使用简单的 href它直接调用 API，但单击后会打开一个新窗口，这是我不希望发生的情况。

然后，我尝试将链接更改为 button这应该会触发 callAPI JavaScript 函数无需打开新窗口即​​可调用 API。这是我的 Java 代码:

final Kml kml = new Kml();
Document doc = kml.createAndSetDocument()
    .withName("My KML File")
    .withOpen(true);
BalloonStyle bstyle = doc.createAndAddStyle()
    .withId("balloonstyle")
    .createAndSetBalloonStyle()
    .withId("ID")
    .withText("<font face='Courier' size='3'>$[description]</font><br/>");

Folder folder = doc.createAndAddFolder().withName("Placemark Points").withOpen(true);

Placemark placemark = folder.createAndAddPlacemark()
    .withName("My Placemark")
    .withVisibility(true)
    .withOpen(true)
    .withStyleUrl("#balloonstyle");

placemark.createAndSetPoint()
    .withExtrude(false)
    .withAltitudeMode(AltitudeMode.CLAMP_TO_GROUND)
    .addToCoordinates(0.0, 0.0);    // Using 0,0 as placeholder

placemark.setDescription(
    "<button type=\"button\" onclick=\"callAPI()\"/>Call API</button>" +
    "<script type=\"text/javascript\"> " +
    "function callAPI() { " +
    "var xhttp = new XMLHttpRequest(); " +
    "xhttp.open('GET', '" + apiUrl + "', true); " +    // apiURL = url to my REST API
    "xhttp.send(); }" +
    "</script>"
);

旁注:我见过 JAK 示例，其中涉及包含 <![CDATA[...]]>标签周围的描述，但这会导致一些格式问题，并且似乎没有必要(当我将生成的 KML 文件导入 Google 地球时，描述中的 HTML 可以在没有标签的情况下工作/标签本身似乎会自动显示)。我也尝试将标签放回原处，但没有解决问题。

以下是运行我的代码后生成的示例 KML 文件(我已将我的 URL 替换为假 API URL https://jsonplaceholder.typicode.com/todos/1 作为占位符):

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ns2:kml xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:ns2="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:xal="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">
    <ns2:Document>
        <ns2:name>My KML File</ns2:name>
        <ns2:open>1</ns2:open>
        <ns2:Style id="balloonstyle">
            <ns2:BalloonStyle id="ID">
                <ns2:text>&lt;font face='Courier' size='3'&gt;$[description]&lt;/font&gt;</ns2:text>
            </ns2:BalloonStyle>
        </ns2:Style>
        <ns2:Folder>
            <ns2:name>Placemark -- Points</ns2:name>
            <ns2:open>1</ns2:open>
            <ns2:Placemark>
                <ns2:name>My Placemark</ns2:name>
                <ns2:visibility>1</ns2:visibility>
                <ns2:open>1</ns2:open>
                <ns2:description>&lt;button type=&quot;button&quot; onclick=&quot;callAPI()&quot;/&gt;Call API&lt;/button&gt;&lt;script type=&quot;text/javascript&quot;&gt; function callAPI() { var xhttp = new XMLHttpRequest(); xhttp.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true); xhttp.send(); }&lt;/script&gt;</ns2:description>
                <ns2:styleUrl>#balloonstyle</ns2:styleUrl>
                <ns2:Point>
                    <ns2:extrude>0</ns2:extrude>
                    <ns2:altitudeMode>clampToGround</ns2:altitudeMode>
                    <ns2:coordinates>0.0,0.0</ns2:coordinates>
                </ns2:Point>
            </ns2:Placemark>
        </ns2:Folder>
    </ns2:Document>
</ns2:kml>

当我尝试将其导入 Chrome 上的 Google 地球时，单击按钮时出现此错误:

callAPI is not defined at HTMLButtonElement.onclick

我在描述格式中做错了什么，所以它无法告诉我已经创建了 callAPI功能？

或者地标描述气球中的 JavaScript 在 Google 地球上不起作用吗？

Answer 1

大多数 JavaScript 应该可以在 Google 地球的气球中运行...无论是在 Earth Pro(v7.x，桌面应用程序)还是新的网络和移动地球(v9.x)中。您的 KML 和气球代码在 Google 地球专业版中加载后是否可以正常工作？

由于 Web 版 Earth 在浏览器中运行，因此在加载您可能遇到的外部资源(图像文件等)时存在一些更多限制，包括要求正确设置 CORS header 。确保您的本地服务器设置为允许 CORS 请求。如果这没有帮助，您可以分享一个 KML 示例吗？