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

【问题标题】：remove xml-generated polygons on high zoom level在高缩放级别上删除 xml 生成的多边形
【发布时间】：2013-07-23 04:31:37
【问题描述】：

我在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);
      }
   });
}
});

【问题讨论】：

标签： xml google-maps-api-3 zooming polygon

【解决方案1】：

有不同的方法，我更喜欢以下几种：

为地图创建一个自定义属性，该属性包含多边形的地图属性（地图实例或 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-property，它将在 zoom_changed 上更新。

您现在要做的就是将多边形的 map-property 绑定到 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');

【讨论】：