使用 Javascript 从 KML 中提取扩展数据答案

【问题标题】：Extracting Extended Data from KML using Javascript使用 Javascript 从 KML 中提取扩展数据
【发布时间】：2013-10-03 13:33:20
【问题描述】：

我在 KML 中有一个类似这样的地标

<Placemark> 
 <id>test345</id>
<name>Images from KML file</name>
<ExtendedData>
<Data name="type">
    <value>images</value>
</Data>
</ExtendedData>
<Point>
  <coordinates>-122.448425,37.802907,0</coordinates>
</Point>

我正在尝试在点击事件上从该地点标记中提取 ExtendedData 信息：

google.earth.addEventListener(kmlObject, 'click', function(event) {
    event.preventDefault();
    var kmlPlacemark = event.getTarget();
});

另一种解决方案是从 kmlPlacemarker 获取 kmlObject，有什么想法吗？

【问题讨论】：

标签： kml google-earth-plugin

【解决方案1】：

鉴于地标，Google 地球 API 提供了两种访问 ExtendedData 元素的方法。

getBalloonHtml()
getBalloonHtmlUnsafe()

API 参考：
https://developers.google.com/earth/documentation/reference/interface_kml_feature

您可以在此处的 Google Code Playground 中找到一个工作示例：
https://code.google.com/apis/ajax/playground/?exp=earth#extended_data_in_balloons

如果您想获取扩展数据的原始 KML，那么您可以获取 KML 表示并将其解析为 XML 文档。

var output = placemark.getKml();

【讨论】：

完美，我将数据转换为地图的唯一方法就是编写一个解析函数？但是感谢您给了我一个起点，正是我所需要的！

【解决方案2】：

只是说我在插件的支持论坛上发布了这个问题：https://code.google.com/p/earth-api-samples/issues/detail?id=16

这是我拼凑起来为getExtendedData 提供支持的一种方法。它通过 'feature.getKml();' 将 Kml 字符串作为参数，它返回在 key[value] 对象中具有值的任何扩展数据元素。它期望扩展数据的格式为：

<Data name="Foo">
  <value>bar</value>
</Data>

在 XP - FF3.0、IE7、Chrome 中测试

function getExtendedData(kmlString) { 
  var xmlDoc = null; 
  var keyValue = []; 
  //Parse the kml 
  try { 
    //Internet Explorer 
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDoc.async="false"; 
    xmlDoc.loadXML(kmlString); 
  } catch(e) { 
    try { 
      //Firefox, etc. 
      var parser = new DOMParser(); 
      xmlDoc = parser.parseFromString(kmlString,"text/xml"); 
    } 
    catch(e) { 
      //Failed to parse 
      alert(e.message); 
      return; 
    } 
  } 
  // Get all the named elements 
  var data = xmlDoc.getElementsByTagName("Data"); 
  // Iterate through the data elements 
  for(var i=0; i<data.length; i++) { 
    if(data[i].getAttribute("name") &&
      data[i].getElementsByTagName("value").length > 0) { 
      // Get the name and value 
      var name = data[i].getAttribute("name"); 
      var value = data[i].getElementsByTagName("value")[0].firstChild.data; 
      // Assign them to the keyValue object 
      keyValue[name] = value; 
    } 
  } 
  return keyValue; 
}

用法

// where 'feature' is the object with the extended data
var data = getExtendedData(feature.getKml()); 

for (var name in data) { 
  var value = data[name]; 
  alert(name + '=' + value); // e.g. type=images
}

【讨论】：

【解决方案3】：

实际上可以通过 DOM API 访问 ExtendedData 元素，尽管它们在任何地方都没有特别完善的文档。我在使用插件打包的一些资源 (.rcc) 文件中四处寻找它们时发现了它们。

假设一个简单的地标示例与您的相似：

  <Placemark id="testmark">
    <!-- other stuff... -->
    <ExtendedData>
      <Data name="someDataUrl">
        <displayName>URL Representing some Data</displayName>
        <value>http://example.com/#hello</value> 
      </Data>
    </ExtendedData>
  </Placemark>

然后（一旦它被提取/解析/加载到地球，你可以访问它：

var mark = ge.getElementById('testmark');
var extDataObj = mark.getExtendedData();
var extDataOut = Array(extDataObj.getDataCount());

for (var i = 0; i < extDataObj.getDataCount(); i++) {
    var item = extDataObj.getData(i);
    var details = { name: item.getName(),
                    displayName: item.getDisplayName(),
                    value: item.getValue() 
                   };
    extDataOut[i] = details;
}
console.dir(extDataOut);

还没有测试它与.getKml() 相比的性能并提供给外部解析器方法，并且缺乏官方文档可能意味着它没有完全功能或受支持，但在迄今为止的所有测试中，它似乎还可以。我还没有找到访问任何更复杂的 SchemaData 类型结构的方法，只有简单的<data name=''><value>... 表单。

【讨论】：