Gestione mappe di Google Maps limite a 1 poligono

Question

Sto creando una mappa con l'API di google maps v3. Utilizzare il gestore disegno per disegnare forme. C'è un modo per disabilitare il pulsante poligono dopo che è stato disegnato 1 poligono? Ho letto l'API ma non riesco a trovare nessun evento per l'avvio del poligono, solo per polygoncomplete.

Forse un modo per rilevare il cambio di modalità disegno? o rimuovere google.maps.drawing.OverlayType.POLYGON ma rimetterlo se il poligono corrente è stato cancellato?

Answer 1

documentation.

1. Inizio da this sample.

2. nascondere il disegno di controllo in caso polygoncomplete

   drawingManager.setOptions({ 
        drawingControl: false 
       }); 
   

3. aggiungere il disegno di controllo nella funzione deleteSelectedShape

   drawingManager.setOptions({ 
       drawingControl: true 
   }); 
   

4. Configurare il drawingManager di aggiungere solo poligoni

   drawingControlOptions: { 
       drawingModes: [ 
        google.maps.drawing.OverlayType.POLYGON 
       ] 
       }, 
   

working example

frammento di codice:

var drawingManager; 
 
var selectedShape; 
 
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; 
 
var selectedColor; 
 
var colorButtons = {}; 
 

 
function clearSelection() { 
 
    if (selectedShape) { 
 
    selectedShape.setEditable(false); 
 
    selectedShape = null; 
 
    } 
 
} 
 

 
function setSelection(shape) { 
 
    clearSelection(); 
 
    selectedShape = shape; 
 
    shape.setEditable(true); 
 
    selectColor(shape.get('fillColor') || shape.get('strokeColor')); 
 
} 
 

 
function deleteSelectedShape() { 
 
    if (selectedShape) { 
 
    selectedShape.setMap(null); 
 
    // To show: 
 
    drawingManager.setOptions({ 
 
     drawingControl: true 
 
    }); 
 
    } 
 
} 
 

 
function selectColor(color) { 
 
    selectedColor = color; 
 
    for (var i = 0; i < colors.length; ++i) { 
 
    var currColor = colors[i]; 
 
    colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
 
    } 
 

 
    // Retrieves the current options from the drawing manager and replaces the 
 
    // stroke or fill color as appropriate. 
 
    var polylineOptions = drawingManager.get('polylineOptions'); 
 
    polylineOptions.strokeColor = color; 
 
    drawingManager.set('polylineOptions', polylineOptions); 
 

 
    var rectangleOptions = drawingManager.get('rectangleOptions'); 
 
    rectangleOptions.fillColor = color; 
 
    drawingManager.set('rectangleOptions', rectangleOptions); 
 

 
    var circleOptions = drawingManager.get('circleOptions'); 
 
    circleOptions.fillColor = color; 
 
    drawingManager.set('circleOptions', circleOptions); 
 

 
    var polygonOptions = drawingManager.get('polygonOptions'); 
 
    polygonOptions.fillColor = color; 
 
    drawingManager.set('polygonOptions', polygonOptions); 
 
} 
 

 
function setSelectedShapeColor(color) { 
 
    if (selectedShape) { 
 
    if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { 
 
     selectedShape.set('strokeColor', color); 
 
    } else { 
 
     selectedShape.set('fillColor', color); 
 
    } 
 
    } 
 
} 
 

 
function makeColorButton(color) { 
 
    var button = document.createElement('span'); 
 
    button.className = 'color-button'; 
 
    button.style.backgroundColor = color; 
 
    google.maps.event.addDomListener(button, 'click', function() { 
 
    selectColor(color); 
 
    setSelectedShapeColor(color); 
 
    }); 
 

 
    return button; 
 
} 
 

 
function buildColorPalette() { 
 
    var colorPalette = document.getElementById('color-palette'); 
 
    for (var i = 0; i < colors.length; ++i) { 
 
    var currColor = colors[i]; 
 
    var colorButton = makeColorButton(currColor); 
 
    colorPalette.appendChild(colorButton); 
 
    colorButtons[currColor] = colorButton; 
 
    } 
 
    selectColor(colors[0]); 
 
} 
 

 
function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(22.344, 114.048), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDefaultUI: true, 
 
    zoomControl: true 
 
    }); 
 

 
    var polyOptions = { 
 
    strokeWeight: 0, 
 
    fillOpacity: 0.45, 
 
    editable: true 
 
    }; 
 
    // Creates a drawing manager attached to the map that allows the user to draw 
 
    // markers, lines, and shapes. 
 
    drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
    drawingControlOptions: { 
 
     drawingModes: [ 
 
     google.maps.drawing.OverlayType.POLYGON 
 
     ] 
 
    }, 
 
    markerOptions: { 
 
     draggable: true 
 
    }, 
 
    polylineOptions: { 
 
     editable: true 
 
    }, 
 
    rectangleOptions: polyOptions, 
 
    circleOptions: polyOptions, 
 
    polygonOptions: polyOptions, 
 
    map: map 
 
    }); 
 

 
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { 
 
    if (event.type == google.maps.drawing.OverlayType.CIRCLE) { 
 
     var radius = event.overlay.getRadius(); 
 
    } 
 
    }); 
 
    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); 
 
     // To hide: 
 
     drawingManager.setOptions({ 
 
     drawingControl: false 
 
     }); 
 

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

 
    // Clear the current selection when the drawing mode is changed, or when the 
 
    // map is clicked. 
 
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); 
 
    google.maps.event.addListener(map, 'click', clearSelection); 
 
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 
 

 
    buildColorPalette(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

#map, 
 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#panel { 
 
    width: 200px; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 13px; 
 
    float: right; 
 
    margin: 10px; 
 
} 
 
#color-palette { 
 
    clear: both; 
 
} 
 
.color-button { 
 
    width: 14px; 
 
    height: 14px; 
 
    font-size: 0; 
 
    margin: 2px; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
#delete-button { 
 
    margin-top: 5px; 
 
}

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> 
 
<div id="panel"> 
 
    <div id="color-palette"></div> 
 
    <div> 
 
    <button id="delete-button">Delete Selected Shape</button> 
 
    </div> 
 
</div> 
 
<div id="map"></div>