谷歌地图创建甜甜圈多边形从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

的问题是，它有父母没有被处理为父母路径（S）的一部分，因为它听起来像你知道你的最新评论的多边形。当你有多重多边形这样的父母意图是，你通过他们一次所有路径到您的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'); 
    } 
});