在高缩放级别删除xml生成的多边形

时间:2013-07-23 04:31:37

标签: xml google-maps-api-3 zoom polygon

我在http://www.noosawaters.org/Google/noosawaters_xml.html有一个页面,有两个多边形,我想以更高的缩放级别删除它们。多边形是从mySQL DB表中保存的坐标生成的。 php创建必要的xml树。

我的代码只删除了一个多边形:

var phpscript = "noosawaters_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++) {
   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
   }
   var this_polygon = a + 1;
   var NoosaWaters = "NoosaWaters" + this_polygon;
   NoosaWaters = new google.maps.Polygon(polyOptions);
   NoosaWaters.setMap(map);
   google.maps.event.addListener(map, "zoom_changed", function() {
      if (map.getZoom() > 18){
         NoosaWaters.setMap(null);
      }
      else{
         NoosaWaters.setMap(map);
      }
   });
}
});

1 个答案:

答案 0 :(得分:1)

有不同的方式,我更喜欢以下内容:

为地图创建一个自定义属性,该属性包含多边形的map属性(Maps-instance或null,具体取决于缩放级别):

 //add this code right after the code where you create the Maps-instance

  google.maps.event.addListener(map, 'zoom_changed', function(){
   var polymap=this.getZoom() > 18 ? null : this;
      if(this.get('polymap')!==polymap){
        this.set('polymap',polymap);
       }
  });
  google.maps.event.addListenerOnce(map,'idle',function(){
      google.maps.event.trigger(map, 'zoom_changed')
  });

地图现在有一个polymap - 属性,该属性将在zoom_changed上更新。

现在你要做的就是将多边形的map属性绑定到地图的polymap-property,

替换此代码:

NoosaWaters.setMap(map);
   google.maps.event.addListener(map, "zoom_changed", function() {
      if (map.getZoom() > 18){
         NoosaWaters.setMap(null);
      }
      else{
         NoosaWaters.setMap(map);
      }
   });

通过该代码:

NoosaWaters.bindTo('map',map,'polymap');