谷歌地图从xml创建甜甜圈多边形

Question

我在http://www.choptankelectric.com/outages/google/cec_create_xml.html 有一个页面，其中有几个多边形，其中一些包含“甜甜圈”孔，这些孔应该是透明的，但显示为灰色。

坐标来自一个 XML 文件，应该看起来像 http://www.choptankelectric.com/outages/index.html，它使用了一个非常庞大的包含文件并且不优雅。 XML 是根据保存在 mySQL DB 表中的坐标生成的。每个多边形都有一个 polygonID 和（在内部多边形的情况下）一个显示包含它的父外部多边形的字段。

如何让它显示透明的甜甜圈孔？

代码如下：

var phpscript = "cec_create_xml.php"; // creates xml data for polygons
downloadUrl(phpscript, function(data) {
   var polygons = data.documentElement.getElementsByTagName("polygon");
   for (var a = 0; a < polygons.length; a++) {
   //for (var a = 0; a < 1; a++) {
      var Parent = polygons[a].getAttribute("Parent");
      var strokeColor = polygons[a].getAttribute("strokeColor");
      var strokeOpacity = polygons[a].getAttribute("strokeOpacity");
      var strokeWeight = polygons[a].getAttribute("strokeWeight");
      var fillColor = polygons[a].getAttribute("fillColor");
      var fillOpacity = polygons[a].getAttribute("fillOpacity");
      var pts = [[]];
      var points = polygons[a].getElementsByTagName("point");
      for (var i = 0; i < points.length; i++) {
         pts[i] = new google.maps.LatLng(parseFloat(points[i].getAttribute("lat")),
         parseFloat(points[i].getAttribute("lng")));
      }
      var polyOptions = {
         paths: pts,
         strokeColor: strokeColor,
         strokeOpacity: strokeOpacity,
         strokeWeight: strokeWeight,
         fillColor: fillColor,
         fillOpacity: fillOpacity
      }
      varCECarea = new google.maps.Polygon(polyOptions);
      CECarea.bindTo('map',map,'polymap');
   }
});

Answer 1

问题在于，具有父级的多边形并未作为父级路径的一部分进行处理，就像您在最新评论中所知道的那样。当您有像这些父母一样的多面体时，您可以一次将它们的所有路径传递到您的 google.maps.PolygonOptions 对象的“路径”属性中（或者当调用 Polygon.setPaths() 作为第一个参数时）作为一个数组数组，每个数组都包含一个多边形路径。 您在上面发布的确切代码段，将其更改为以下内容：

var phpscript = "cec_create_xml.php"; // creates xml data for polygons
downloadUrl(phpscript, function(data) {
    var i, poly, id, parent,
        parentPolys = {},
        childPolys = [],
        polyXml = data.documentElement.getElementsByTagName("polygon"),
        len = polyXml.length;

    function jsPolyFromXmlPoly(xmlPolygon) {
        var i, pt, lat, lng,
            obj = {
                paths : [[]],
                id : xmlPolygon.getAttribute('PolygonID'),
                parent : xmlPolygon.getAttribute("Parent"),
                strokeColor : xmlPolygon.getAttribute("strokeColor"),
                strokeOpacity : xmlPolygon.getAttribute("strokeOpacity"),
                strokeWeight : xmlPolygon.getAttribute("strokeWeight"),
                fillColor : xmlPolygon.getAttribute("fillColor"),
                fillOpacity : xmlPolygon.getAttribute("fillOpacity")
            },
            pts = xmlPolygon.getElementsByTagName('point'),
            len = pts.length;
        for (i = 0; i < len; i++) {
            pt = pts[i];
            lat = Number(pt.getAttribute('lat'));
            lng = Number(pt.getAttribute('lng'));
            obj.paths[0].push(new google.maps.LatLng(lat, lng));
        }
        return obj;
    }

     //begin filtering & separating child polygons and parent polygons,
     //first converting to javascript object rather than xml
    for (i = 0; i < len; i++) {
        poly = jsPolyFromXmlPoly(polyXml[i]);
        id = poly.id;
        parent = poly.parent;
        if (parent === '0') {
            parentPolys[id] = poly;
        } else {
            childPolys.push(poly);
        }
    }
     //begin pushing all the child polygons paths into their parents 'paths' array
    for (i = 0, len = childPolys.length; i < len; i++) {
        poly = childPolys[i];
        id = poly.parent;
        parent = parentPolys[id];
        parent.paths.push(poly.paths[0]);
    }
     //create google maps polygons using only the parent polygons,
     //as they now contain all the child polygon paths
    for (i in parentPolys) {
        poly = parentPolys[i];
        var polyOptions = {
            paths: poly.paths,
            strokeColor: poly.strokeColor,
            strokeOpacity: poly.strokeOpacity,
            strokeWeight: poly.strokeWeight,
            fillColor: poly.fillColor,
            fillOpacity: poly.fillOpacity
        };
        var CECarea = new google.maps.Polygon(polyOptions);
        CECarea.bindTo('map', map, 'polymap');
    }
});