Google Maps自定义OverlayImage图层遮挡绘图工具问题求助

Hey there, let's get your drawing tools showing up above your custom overlay. The core issue here is how Google Maps organizes its overlay panes and incorrect property names in your code. Here's the step-by-step solution:

Key Problems in Your Code #

1. Incorrect Pane Placement: Your custom CanvasOverlay was being added to the overlayImage pane, which sits above the overlayLayer pane where most drawing tool shapes (polygons, circles, etc.) are rendered.
2. Invalid Property Name: You used index instead of the correct zIndex property for your DrawingManager options—this had no effect on layering.
3. Unnecessary Position Properties: You added position to shape options (like marker/circle options) which isn't valid here, as position is set when the shape is drawn.

Corrected Code & Explanations #

1. Fix DrawingManager Options #

Replace all instances of index with zIndex and remove invalid position properties:

function drawTools() {
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    zIndex: 9999999999, // Corrected from index to zIndex
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
      draggable: true,
      clickable: true,
      zIndex: 99999999 // Corrected from index to zIndex
    },
    circleOptions: {
      fillColor: '#ffff00',
      clickable: true,
      editable: true,
      draggable: true,
      zIndex: 99999999, // Corrected from index to zIndex
      geodesic: true
    },
    polygonOptions:{
      fillColor: '#9400d3',
      editable:true,
      clickable:true,
      draggable:true,
      zIndex:99999999, // Corrected from index to zIndex
      geodesic:true
    },
    polylineOptions:{
      fillColor: '#008000',
      editable:true,
      clickable:true,
      draggable:true,
      zIndex:99999999, // Corrected from index to zIndex
      geodesic:true
    },
    rectangleOptions:{
      fillColor: '#ff0000',
      editable:true,
      clickable:true,
      draggable:true,
      zIndex:99999999, // Corrected from index to zIndex
      geodesic:true
    }
  });
  return drawingManager;
};

2. Adjust Overlay Pane & Z-Index #

Move your custom overlay to a lower pane (either overlayLayer or mapPane) and set a low zIndex to ensure drawing shapes sit on top:

CanvasOverlay.prototype.onAdd = function () {
  // ... existing code ...

  // Add zIndex to your overlay div to keep it below drawing tools
  this.div_.style.zIndex = "10";
  
  // Change from overlayImage to overlayLayer (or mapPane for even lower placement)
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(this.div_);
  
  return this;
}

Why This Works #

Google Maps panes are ordered from bottom to top:
mapPane → overlayLayer → overlayImage → overlayMouseTarget → floatPane

• By moving your overlay to overlayLayer, you place it at the same level as most drawing shapes, but your low zIndex ensures the drawing tools (with high zIndex) appear above.
• If you want your overlay to sit directly above the map tiles (below all drawing shapes), use panes.mapPane.appendChild(this.div_) instead—no zIndex adjustment is needed in that case.

Content of the question originates from stack exchange, question author Engin