Question

当我从地图或边栏中选择KML文件时，我试图从KML文件的自定义字段中获取数据以显示在div id = summary部分中。我只是简单地复制了侧边栏html，以创建一个摘要html部分，并希望将（文档/文件夹/地标/summary.text）中的KML内容显示在该div标签中。

<table style="width:100%;">
    <tr>
        <td>
            <div id="loaddiv">Loading.....&#160;&#160;&#160; please wait!
                <br />
            </div>
            <div id="map_canvas">
            </div>
        </td>
        <td>
            <div id="sidebar" style="width:300px;height:600px; overflow:auto"></div>
        </td>
        <td>
            <div id="summary" style="width:300px;height:600px; overflow:auto"></div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="link"></div>
        </td>
    </tr>
</table>

我觉得这可能需要geoxml3.js文件中的某些功能覆盖。我在geoxml3.js中看到了一个包含以下内容的部分，似乎可能需要添加一些内容才能从KML文件中提取信息。

        placemark = {
          name:  geoXML3.nodeValue(node.getElementsByTagName('name')[0]),
          description: geoXML3.nodeValue(node.getElementsByTagName('description')[0]),
          styleUrl: geoXML3.nodeValue(node.getElementsByTagName('styleUrl')[0]),
          id: node.getAttribute('id')
        };

网站的侧边栏列旁边有摘要表列： https://s20.postimg.cc/6jjcrnke5/geo1.png

KML文件XML视图： https://s20.postimg.cc/4eyzqkqh9/geo2.png

Answer 1

创建以下功能：

function showSummary(pm, doc) {
    summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
    document.getElementById("summary").innerHTML = summaryHtml;
}

function clickPoly(poly, polynum, doc) {
    google.maps.event.addListener(poly, "click", function() {
        showSummary(polynum, doc);
    });
}

在function useTheData(doc)的{{1}}行下添加clickPoly(placemark.polygon, i, j);，并在highlightPoly(placemark.polygon, i, j);行下添加clickPoly(placemark.polyline, i, j);。

最后将highlightPoly(placemark.polyline, i, j);添加到showSummary(pm, doc);的第一行。

Answer 2

为您的KML中的自定义标记创建一个自定义解析功能（解析来自KML的信息，并在由geoxml3处理的对象中填充一个自定义字段
例如：http://www.geocodezip.com/geoxml3_test/votemap_address2.html）

// Custom placemark parse function
function parsePlacemark (node, placemark) {
      var summaryNodes = node.getElementsByTagName('summary');
      var summary = null;
      if (summaryNodes && summaryNodes.length && (summaryNodes .length > 0)) {
        placemark.summary = geoXML3.nodeValue(summaryNodes[0]);
      }
}

添加代码以将这些信息放在<div>中（通过@PieDev的答案）：

function showSummary(pm, doc) {
    summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
    document.getElementById("summary").innerHTML = summaryHtml;
}

function clickPoly(poly, polynum, doc) {
    google.maps.event.addListener(poly, "click", function() {
        showSummary(polynum, doc);
    });
}

function kmlPlClick(pm,doc) {
   showSummary(pm, doc);
   if (geoXmlDoc[doc].placemarks[pm].polyline.getMap()) {
      google.maps.event.trigger(geoXmlDoc[doc].placemarks[pm].polyline,"click", {vertex: 0});
   } else {
      geoXmlDoc[doc].placemarks[pm].polyline.setMap(map);
      google.maps.event.trigger(geoXmlDoc[doc].placemarks[pm].polyline,"click", {vertex: 0});
   }
}

function useTheData(doc){
  var currentBounds = map.getBounds();
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  // Geodata handling goes here, using JSON properties of the doc object
  sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
  geoXmlDoc = doc;
  for (var j = 0; j<geoXmlDoc.length;j++) {
   if (!geoXmlDoc[j] || !geoXmlDoc[j].placemarks || !geoXmlDoc[j].placemarks.length)
    continue;
   for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
    var placemark = geoXmlDoc[j].placemarks[i];
    if (placemark.polygon) {
      if (currentBounds.intersects(placemark.polygon.bounds)) {
        makeSidebarPolygonEntry(i,j);
      }
      var kmlStrokeColor = kmlColor(placemark.style.color);
      var kmlFillColor = kmlColor(placemark.style.fillcolor);
      var normalStyle = {
          strokeColor: kmlStrokeColor.color,
          strokeWeight: placemark.style.width,
          strokeOpacity: kmlStrokeColor.opacity,
          fillColor: kmlFillColor.color,
          fillOpacity: kmlFillColor.opacity
          };
      placemark.polygon.normalStyle = normalStyle;

      highlightPoly(placemark.polygon, i, j);
      clickPoly(placemark.polygon, i, j);
    }
    if (placemark.polyline) {
      if (currentBounds.intersects(placemark.polyline.bounds)) {
         makeSidebarPolylineEntry(i,j);
      }
      var kmlStrokeColor = kmlColor(placemark.style.color);
      var normalStyle = {
          strokeColor: kmlStrokeColor.color,
          strokeWeight: placemark.style.width,
          strokeOpacity: kmlStrokeColor.opacity
          };
      placemark.polyline.normalStyle = normalStyle;

      highlightPoly(placemark.polyline, i, j);
      clickPoly(placemark.polyline, i, j);
    }
    if (placemark.marker) {
      if (currentBounds.contains(placemark.marker.getPosition())) {
         makeSidebarEntry(i,j);
      }
    }

   }
  }  
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

working example

GeoXml3在DIV标签中显示KML文件中的自定义字段

2 个答案: