谷歌地圖創建甜甜圈多邊形從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'); 
    } 
});