无法将事件侦听器附加到 kml 图层的多边形

Question

使用 Google 地球，我有一个加载的 kml 图层，显示美国每个县的多边形。单击时会弹出一个气球，其中包含有关状态的一些相关信息（名称、哪个状态、区域等）当用户单击多边形时，我希望该信息也可以在其他地方的 DIV 元素上弹出。

这是我目前的代码。

var ge;
google.load("earth", "1");

function init() {
    google.earth.createInstance('map3d', initCB, failureCB);
}

function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
    ge.getNavigationControl().setStreetViewEnabled(true);
    ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

    //here is where im loading the kml file 
    google.earth.fetchKml(ge, href, function (kmlObject) {
        if (kmlObject) {
            // show it on Earth
            ge.getFeatures().appendChild(kmlObject);
        } else {
            setTimeout(function () {
                alert('Bad or null KML.');
            }, 0);
        }
    });

    function recordEvent(event) {
        alert("click");
    }

    // Listen to the mousemove event on the globe.
    google.earth.addEventListener(ge.getGlobe(), 'click', recordEvent);
}

function failureCB(errorCode) {}

google.setOnLoadCallback(init);

我的问题是，当我将 ge.getGlobe() 更改为 kmlObject 或 ge.getFeatures() 时，它不起作用。

我的第一个问题是，当用户单击 kml 图层的多边形时，我应该如何更改 ge.getGlobe() 才能获得单击侦听器？

之后我打算使用getDescription() 或getBalloonHtml() 来获取多边形气球信息。我是否走在正确的轨道上？

Answer 1

...我应该将 ge.getGlobe() 更改为...

您不需要从GEGlobe 更改事件对象。事实上，它是最好的选择，因为您可以使用它来捕获所有事件，然后在处理程序中检查目标对象。这意味着您只需在 API 中设置一个事件侦听器。

另一种选择是以某种方式解析 KML 并将特定事件处理程序附加到特定对象。这意味着您必须为每个对象创建一个事件侦听器。

我是否走在正确的轨道上？

所以，是的，你在正确的轨道上。我会保留通用的 GEGlobe 事件侦听器，但扩展您的 recordEvent 方法以检查您感兴趣的 KML 对象的类型。您不显示您的 KML，因此很难知道您是如何构建它的（是例如，您的 <Polygon>s 嵌套在 <Placemarks> 或 ` 元素中）。

在简单的情况下，如果您的多边形位于地标中，那么您可以执行以下操作。本质上是监听所有对象的点击，然后过滤所有 Placmark（通过 API 创建或通过 KML 加载）。

function recordEvent(event) {
  var target = event.getTarget();
  var type = target.getType();
  if(type == "KmlPolygon") {
  } else if(type == "KmlPlacemark") {
    // get the data you want from the target.
    var description = target.getDescription();
    var balloon = target.getBalloonHtml();
  } else if(type == "KmlLineString") {
    //etc...
  }
};

google.earth.addEventListener(ge.getGlobe(), 'click', recordEvent);

如果您想选择其他选项，您可以在 KML Dom 加载后对其进行迭代，然后将事件添加到特定对象。您可以使用kmldomwalk.js 之类的方法来执行此操作。虽然我不会在这里真正推荐这种方法，因为您将在 api 中创建大量事件侦听器（在这种情况下，每个 Placemark 一个）。好的一面是事件附加到 kml 文件中的每个特定对象，因此如果您有其他 Plaemark 等，不应该具有相同的“点击”行为，那么它可能很有用。

function placeMarkClick(event) { 
  var target = event.getTarget();
  // get the data you want from the target.
  var description = target.getDescription();
  var balloon = target.getBalloonHtml();
}

google.earth.fetchKml(ge, href, function (kml) {
    if (kml) {
        parseKml(kml);
    } else {
        setTimeout(function () {
            alert('Bad or null KML.');
        }, 0);
    }
});

function parseKml(kml) {
    ge.getFeatures().appendChild(kml);
    walkKmlDom(kml, function () {
        var type = this.getType();
        if (type == 'KmlPlacemark') {
          // add event listener to `this`
          google.earth.addEventListener(this, 'click', placeMarkClick);
        }
    });
};

Answer 2

自从我从事这个工作很久以来......但我可以尝试帮助你或给你一些线索......

关于“google.earth.addEventListener(ge.getGlobe(), 'click', recordEvent);”的问题 ge.getGlobe 不能用 ge.getFeatures() 替换：如果您查看文档 (https://developers.google.com/earth/documentation/reference/interface_g_e_feature_container-members) 的 GEFeatureContainer （这是 getFeatures() 的输出类型，则单击事件未定义！

ge.getGlobe 替换为 kmlObject：这里是什么 kmlObject？？

关于使用getDescription，你能看看getTarget，getCurrentTarget ... (https://developers.google.com/earth/documentation/reference/interface_kml_event)

正如我告诉你的那样，我已经很长时间没有使用它了。所以我不确定这对你有帮助，但至少，这是你可以查看的第一首曲目！

请随时通知我！ :-)