Question

根据此示例，我要加载3个KML文件（感谢@geocodezip）：http://www.geocodezip.com/geoxml3_test/v3_geoxml3_multipleKML_test.html

将鼠标悬停在侧栏上的一个KML文件名上时，在侧栏上不仅仅只突出显示单个文件，而是在地图上突出显示单个文件。

突出显示了多个文件 错误

只需突出显示一个 正确

我进行了一些调查，发现在Document \ Folder \ Folder目录中，如果不同对具有相同数量的“地标”，则会突出显示这些对。

在KML文件中，我的文件“ ice.kml”和“ rainier.kml”都有1个地标文件夹，“ preston.kml”有2个地标文件夹。

我使用的文件位于下面的GitHub链接中。

https://github.com/PieDevTest/KML-Website

编辑：

“函数kmlHighlightPoly（pm）{”是否应该接受2个参数？像“函数kmlHighlightPoly（pm，mp）{”或您想命名第二个var的任何东西一样？

<td onmouseover="kmlHighlightPoly(2,2);" ... >

上面生成的HTML看起来像（地标＃，行＃）。因此，如果我在“ preston.kml”文件中添加了另一个地标，则其名称为“ kmlHighlightPoly（3,2）”。好的，直到添加了另一个带有3个地标的kml文件，然后将它们一起突出显示，因为kmlHighlightPoly函数仅查看第一个数字而不是行号。

function kmlHighlightPoly(pm) {
    for (var j = 0; j < geoXmlDoc.length; j++) {
        for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
            var placemark = geoXmlDoc[j].placemarks[i];
            if (i == pm) {
                if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
            } else {
                if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
            }
        }
    }
}

Answer 1

因此，我最终更改了以下高亮显示功能以获取第二个参数，并切换了if检查以查看“ j”变量，这是“行”的含义而不是“地标”的含义。

在 makeSidebarPoly 函数和useTheData（doc）函数中的 highlightPoly（placemark.polygon，j）; 行中也进行了相同的i to j切换。 >

function kmlHighlightPoly(pm, polynum) {
    for (var j = 0; j < geoXmlDoc.length; j++) {
        for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
            var placemark = geoXmlDoc[j].placemarks[i];
            if (j == polynum) {
                if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
            } else {
                if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
            }
        }
    }
}

您可以在GitHub上查看全部更改。

Answer 2

有许多地方需要更新，以便附加的doc才能由mouseover / mouseout事件处理程序正确处理。

updated page

function kmlHighlightPoly(pm, doc) {
 for (var j=0; j<geoXmlDoc.length;j++) {
   for (var i=0;i<geoXmlDoc[j].placemarks.length;i++) {
     var placemark = geoXmlDoc[j].placemarks[i];
     if (i == pm && j == doc) {
       if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
       if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
     } else {
       if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
       if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
     }
   }
 }
}
function kmlUnHighlightPoly(pm, doc) {
 for (var j=0; j<geoXmlDoc.length; j++) {
   for (var i=0;i<geoXmlDoc[j].placemarks.length;i++) {
     if (i == pm && j == doc) {
       var placemark = geoXmlDoc[j].placemarks[i];
       if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
       if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
     }
   }
 }
}

function highlightPoly(poly, polynum, doc) {
  google.maps.event.addListener(poly,"mouseover",function() {
    var rowElem = document.getElementById('row'+polynum+'_'+doc);
    if (rowElem) rowElem.style.backgroundColor = "#FFFA5E";
    if (poly instanceof google.maps.Polygon) {
      poly.setOptions(highlightOptions);
    } else if (poly instanceof google.maps.Polyline) {
      poly.setOptions(highlightLineOptions);
    }
  });
  google.maps.event.addListener(poly,"mouseout",function() {
    var rowElem = document.getElementById('row'+polynum+'_'+doc);
    if (rowElem) rowElem.style.backgroundColor = "#FFFFFF";
    poly.setOptions(poly.normalStyle);
  });
}  
function makeSidebarPolylineEntry(i,j) {
  if (geoXml && geoXml.docs && geoXml.docs[j] && geoXml.docs[j].placemarks
         && geoXml.docs[j].placemarks[i] && geoXml.docs[j].placemarks[i].name) {
  var name = geoXml.docs[j].placemarks[i].name;
   if (!name  || (name.length == 0)) name = "polyline #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'_'+j+'"><td onmouseover="kmlHighlightPoly('+i+','+j+');" onmouseout="kmlUnHighlightPoly('+i+','+j+');"><a href="javascript:kmlPlClick('+i+','+j+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+','+j+');">show</a></td></tr>';
  } 
}
function makeSidebarEntry(i,j) {
  if (geoXml && geoXml.docs && geoXml.docs[j] && geoXml.docs[j].placemarks
         && geoXml.docs[j].placemarks[i] && geoXml.docs[j].placemarks[i].name) {
  var name = geoXmlDoc[j].placemarks[i].name;
   if (!name  || (name.length == 0)) name = "marker #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'_'+j+'"><td><a href="javascript:kmlClick('+i+','+j+');">'+name+'</a></td></tr>';
  }
}

然后在useTheData中输入

：

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++) {
    // console.log(doc[0].markers[i].title);
    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);
    }
    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);
    }
    if (placemark.marker) {
      if (currentBounds.contains(placemark.marker.getPosition())) {
         makeSidebarEntry(i,j);
      }
    }
   }
  }  
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

GeoXML3侧栏突出显示/ KML布局

2 个答案: