如何使用 Google 的版本 3 API 设置多边形的可见性？

Question

我找到了使用以下方法设置标记可见性的方法：

            // create the marker 
            blueMarker = new google.maps.Marker({
                position: new google.maps.LatLng(33.514428, -112.29056534285377),
                draggable: true,
                raiseOnDrag: false,
                icon: './Images/blue3Marker.png',
                shapeType: 'BuyersEdgeArea',
                shapeID: '3'
            });

            // set the marker on the map
            blueMarker.setMap(map);

然后我使用 blueMarker.setVisible(false) 或 blueMarker.setVisible(true) 使其可见/不可见。

但是如何对多边形执行相同的操作？

这是我设置多边形的方法：

        BuyersEdge3 = new google.maps.Polygon({
            clickable: true,
            paths: BuyersEdgePath3,
            strokeColor: '#000000',
            strokeOpacity: 1,
            strokeWeight: 2,
            fillColor: ' #810541 ',
            fillOpacity: 0.35
        });

        // set the shape on the map
        BuyersEdge3.setMap(map);

现在我该如何让这个形状不可见？

我的情况是，我有一个复选框，用户可以在其中检查是否看到多边形。第一次检查时，我将创建多边形，但随后的时间，我只想使多边形形状可见或不可见。

我正在转换一个虚拟地球应用程序，我可以在其中“显示”或“隐藏”一个带有多边形的图层，但我找不到使用 JavaScript 为 Google API 版本 3 实现这一技巧的方法。

Answer 1

如果将描边不透明度和填充不透明度设置为零并将多边形重置到地图，就可以做到这一点。

这里有一个针对 Polygon 原型的小技巧（意味着您可以在所有 Polygon 对象中访问它），它将为您做这件事

// this is a visibility flag. don't change it manually
google.maps.Polygon.prototype._visible = true;

// this will save opacity values and set them to 0, and rebound the polygon to the map
google.maps.Polygon.prototype.hide = function(){
    if (this._visible) {
        this._visible = false;
        this._strokeOpacity = this.strokeOpacity;
        this._fillOpacity = this.fillOpacity;
        this.strokeOpacity = 0;
        this.fillOpacity = 0;
        this.setMap(this.map);
    }
}

// this will restore opacity values. and rebound the polygon to the map
google.maps.Polygon.prototype.show = function() {
    if (!this._visible) {
        this._visible = true;
        this.strokeOpacity = this._strokeOpacity;
        this.fillOpacity = this._fillOpacity;
        this.setMap(this.map);
    }
}

现在您可以做

BuyersEdge3.hide()

和

BuyersEdge3.show()

享受！

Answer 2

您可以使用：

BuyersEdge3.setOptions({visible:false});

Answer 3

    if (BuyersEdge3.map)
    {
        BuyersEdge3.setMap(null);
    } else {
        BuyersEdge3.setMap(map);
    }

Answer 4

根据文档GMAP POLYGON GMAP Polygon 有 setVisible() 函数，因此您可以使用它。

myPolygon.setVisible(false); // to hide
myPolygon.setVisible(true); // to show

Answer 5

这是我的想法，适用于我的网站。

    function drawPolygon(p){
if(window.poly)window.poly.setMap(null);
  var pp=[];
  for(var i=0;i<p.length;i+=2)
  {
    pp.push(new google.maps.LatLng(parseFloat(p[i+1]),parseFloat(p[i])));
  }

    window.poly=new google.maps.Polygon({
      paths: pp,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.1
    });

    window.poly.setMap(map);
    google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom()>14) {window.poly.setMap(null);}
else {window.poly.setMap(map);}
  });
  }  

Answer 6

正在工作：

this.visible = !this.visible;
  if (this.visible) {
    this.polygon.setOptions({ fillOpacity: 1, strokeOpacity: 1 }); // Mostrar el polígono
  } else {
    this.polygon.setOptions({ fillOpacity: 0, strokeOpacity: 0 }); // Ocultar el polígono
  }