1

我有 3 个基于此示例加载的 KML 文件（谢谢@geocodezip）：http ://www.geocodezip.com/geoxml3_test/v3_geoxml3_multipleKML_test.html

当您将鼠标悬停在侧边栏中的一个 KML 文件名上时，在侧边栏上，当只有悬停的项目应突出显示时，不仅仅是该单个文件在地图上突出显示。

多个文件突出显示 错误

在此处输入图像描述

只有一个被突出显示 正确

在此处输入图像描述

我做了一些调查，发现如果它们在 Document\Folder\Folder 目录中具有相同数量的“地标”，则会突出显示不同的对。 在此处输入图像描述

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

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

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

编辑：

“function kmlHighlightPoly(pm) {”函数不应该采用 2 个参数吗？像“function kmlHighlightPoly(pm, mp) {”或任何你想命名的第二个变量？

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

上面生成的 HTML 似乎是（# of placemarkers, row #）。因此，如果我在“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);
            }
        }
    }
}
4

2 回答 2

1

所以我最终改变了下面的高亮函数来获取第二个参数，并切换了 if 检查来查看“j” var，这就是“行”的位置，而不是“地标”的位置。

在makeSidebarPoly函数和highlightPoly(placemark.polygon, j);中也做了相同的 i 到 j 切换；useTheData(doc) 函数中的行。

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 上查看完整的更改集。

于 2018-07-16T04:20:09.710 回答
0

有许多地方需要更新，以便doc鼠标悬停/鼠标移出事件处理程序正确处理附加内容。

更新页面

结果地图的屏幕截图（悬停在侧边栏上

结果地图的屏幕截图（悬停在折线上

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;
};
于 2018-07-18T00:19:10.270 回答