Question

当我绘制最后两个多边形的z-index大于第一个时，所以首先“隐藏”而我无法选择，那么我要做的是按区域更改z-index

我试试这个

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        lastPolygon = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
        });
        setSelection(newShape);
      }

      console.log(newShape);
      ArrayDeZonas.push(newShape);
      zIndex += 1
      ordenarZonasDescendente(ArrayDeZonas);

    });
 function ordenarZonasDescendente(zonas) {


    var zonaAuxiliar;      

    for (var i = 0; i < getCantidadElementos(zonas); i++) {

        for (var j = i+1; j < getCantidadElementos(zonas); j++) {

            var area1 = getArea(GetGLatLngArray(zonas[i]));
            var area2 = getArea(GetGLatLngArray(zonas[j]));

            if (area1 < area2) {
                zonas[i].zIndex = zIndex    //Smaller area greater z Index
                zonas[j].zIndex = zIndex-1; //Larger area less zIndexx                  
            }
        }        
    }

    return zonas;

}

在控制台输出中

在consola.log（）中它告诉我他们的z-index已经改变并且很好，但是没有在地图上更新，我无法选择里面的多边形。

对不起我的英语，我希望能理解我的意思，非常感谢你！

Answer 1

我建议：

使用几何库来计算面积

var area = google.maps.geometry.spherical.computeArea(zonas[i].getPath());

使用javascript数组排序来排序多边形

zonas.sort(byArea);
function byArea(a, b) {
  if (a._area < b._area) {
    return -1;
  }
  if (a._area > b._area) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

然后你可以这样做：

function ordenarZonasDescendente(zonas) {
  for (var i = 0; i < zonas.length; i++) {
    var area = google.maps.geometry.spherical.computeArea(zonas[i].getPath());
    zonas[i]._area = area;
  }
  zonas.sort(byArea);
  for (var i = 0; i < zonas.length; i++) {
    zonas[i].set("zIndex", (zonas.length - i));
  }
  return zonas;
}

proof of concept fiddle

代码段：

＆＃13;

$(document).ready(function() {
  function ordenarZonasDescendente(zonas) {
    for (var i = 0; i < zonas.length; i++) {
      var area = google.maps.geometry.spherical.computeArea(zonas[i].getPath());
      zonas[i]._area = area;
    }
    zonas.sort(byArea);
    for (var i = 0; i < zonas.length; i++) {
      zonas[i].set("zIndex", (zonas.length - i));
    }
    return zonas;
  }

  function byArea(a, b) {
    if (a._area < b._area) {
      return -1;
    }
    if (a._area > b._area) {
      return 1;
    }
    // a must be equal to b
    return 0;
  }
  var ArrayDeZonas = [];
  var zIndex = 0;
  var infowindow = new google.maps.InfoWindow();
  var mapHeight = '400px';
  // $('#map-canvas').css('height', mapHeight);
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 47.53187912201915,
      lng: 7.705222390807307
    },
    zoom: 20,
  });
  var map_drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.POLYGON
      ]
    },
    //drawingMode: google.maps.drawing.OverlayType.POLYGON,
    markerOptions: {
      draggable: true
    },

    polylineOptions: {
      editable: true,
      draggable: true
    },
    map: map
  });
  google.maps.event.addListener(map_drawingManager, 'overlaycomplete', function(e) {
    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      // Switch back to non-drawing mode after drawing a shape.
      map_drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly-drawn shape when the user
      // mouses down on it.
      var newShape = e.overlay;
      lastPolygon = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, 'click', function(evt) {
        newShape.setOptions({
          draggable: true
        });
        infowindow.setContent("vertices: " + this.getPath().getLength() + "<br>" + "area:  " + google.maps.geometry.spherical.computeArea(this.getPath()) + "<br>" + "zIndex: " + this.get("zIndex") + "<br>" + "coords: " + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
        /*
          setSelection(newShape);
        */
      });
      /*
        setSelection(newShape);
        */

      console.log(newShape);
      ArrayDeZonas.push(newShape);
      zIndex += 1;
      ordenarZonasDescendente(ArrayDeZonas);
    }
  });
})

＆＃13;

html,
body,
#map-canvas {
  height: 500px;
  width: 750px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

如何选择由另一个多边形

1 个答案: