GeoXml3 Отображение настраиваемого поля из файла KML в теге DIV

Question

Я пытаюсь получить данные из настраиваемого поля в файле KML для отображения в разделе div id=summary, когда этот файл KML выбран либо на карте, либо на боковой панели. Я просто скопировал html боковой панели, чтобы создать секцию html-сводки, и хотел, чтобы содержимое из KML в (Document/Folder/Placemark/summary.text) отображалось в этом теге 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

Представление XML для файлов KML: 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) добавлять clickPoly(placemark.polygon, i, j); под линией highlightPoly(placemark.polygon, i, j); и добавить clickPoly(placemark.polyline, i, j); под линией highlightPoly(placemark.polyline, i, j);,

Наконец добавить showSummary(pm, doc); до первой строки в function kmlPlClick(pm, doc),

Answer 2

1. создайте пользовательскую функцию анализа для пользовательского тега в вашем 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]);
      }
}

2. добавить код, чтобы поместить эту информацию в <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;
};

рабочий пример