Google Maps Drawing Manager重启咨询：单页表单地图绘制场景技术支持

Hey Roman, let's tackle your Google Maps Drawing Manager restart issue and custom feature needs for your single-page form site. Here's a structured, practical solution based on common use cases with the Google Maps JavaScript API:

1. Solving the Drawing Manager Restart Problem #

The core goal here is to reset the drawing state (clear existing polygons, reinitialize tools) when the user loads a new address. Here's how to implement this cleanly:

• First, track your Drawing Manager and drawn shapes globally
  Avoid recreating the Drawing Manager every time—instead, store the instance and user-drawn polygons in variables you can access later (if using a framework like React/Vue, use state or refs instead of raw globals):

  let drawingManager;
  let drawnPolygons = []; // Stores all polygons the user has drawn
  

• Build a reset function to restart the Drawing Manager
  This function will clear existing shapes and reset the tool to its default state. Call it whenever the map loads a new address:

  function resetDrawingManager() {
    // 1. Remove all existing polygons from the map
    drawnPolygons.forEach(polygon => polygon.setMap(null));
    drawnPolygons = []; // Empty the array for new shapes
  
    // 2. Reset the Drawing Manager's state
    if (drawingManager) {
      drawingManager.setDrawingMode(null); // Turn off active drawing first
      // Reapply your custom drawing options (adjust to match your needs)
      drawingManager.setOptions({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [google.maps.drawing.OverlayType.POLYGON]
        },
        polygonOptions: {
          fillColor: '#2ecc71',
          fillOpacity: 0.3,
          strokeColor: '#27ae60',
          strokeWeight: 2,
          editable: true // Let users adjust polygon edges
        }
      });
    }
  }
  

• Trigger the reset after loading a new address
  Call resetDrawingManager() right after the map centers on the user's input address. This ensures the drawing tools are ready for fresh input:

  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: userEnteredAddress }, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      map.setZoom(18); // Zoom in to a roof-level view
      resetDrawingManager(); // Restart the drawing tools here
    }
  });
  

2. Implementing Custom Features for Roof Area Calculation #

Since you mentioned two custom features, here are practical implementations for the most common needs in this use case:

Feature 1: Real-Time Roof Area Calculation #

First, make sure you load the geometry library alongside the Drawing API (add &libraries=drawing,geometry to your Maps API script URL). Then, calculate and display the area as the user draws or edits the polygon:

// Listen for when a polygon is finished being drawn
google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
  drawnPolygons.push(polygon);
  
  // Calculate area in square meters (convert to other units if needed)
  const areaInSqMeters = google.maps.geometry.spherical.computeArea(polygon.getPath()).toFixed(2);
  const areaInSqFeet = (areaInSqMeters * 10.7639).toFixed(2);

  // Show the area to the user (use an info window or your form's UI)
  const areaInfo = new google.maps.InfoWindow({
    content: `<strong>Roof Area:</strong><br>${areaInSqMeters} m² / ${areaInSqFeet} sq ft`
  });
  areaInfo.open(map, polygon);

  // Update area in real-time if the user edits the polygon
  google.maps.event.addListener(polygon.getPath(), 'set_at', () => {
    const updatedArea = google.maps.geometry.spherical.computeArea(polygon.getPath()).toFixed(2);
    areaInfo.setContent(`<strong>Roof Area:</strong><br>${updatedArea} m² / ${(updatedArea * 10.7639).toFixed(2)} sq ft`);
  });
});

Feature 2: Restrict to Single Polygon (Avoid Duplicate Draws) #

Prevent users from drawing multiple polygons by disabling the tool after the first draw, and add a button to let them restart:

google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
  drawnPolygons.push(polygon);
  drawingManager.setDrawingMode(null); // Turn off drawing after first polygon

  // Add a "Redraw" button to your map container
  const redrawBtn = document.createElement('button');
  redrawBtn.textContent = 'Redraw Roof';
  redrawBtn.style.cssText = 'position:absolute; top:20px; right:20px; padding:8px 12px; cursor:pointer;';
  document.getElementById('map-container').appendChild(redrawBtn);

  redrawBtn.addEventListener('click', () => {
    // Remove the old polygon and reset the tool
    polygon.setMap(null);
    drawnPolygons = [];
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
    redrawBtn.remove();
  });
});

Quick Notes: If you're using a frontend framework, avoid global variables and use framework-specific state management. Also, double-check that your Google Cloud project has the Maps JavaScript API, Drawing API, and Geocoding API enabled, and your API key has the correct restrictions.

内容的提问来源于stack exchange，提问作者RomanK