Giới hạn Trình quản lý Bản vẽ của Google Maps cho 1 đa giác

Question

Tôi đang tạo bản đồ với API bản đồ google v3. Sử dụng trình quản lý bản vẽ để vẽ hình dạng. Có cách nào để vô hiệu hóa nút đa giác sau khi đã vẽ 1 đa giác? Tôi đã đọc qua API nhưng không thể tìm thấy bất kỳ sự kiện nào cho bắt đầu đa giác, chỉ cho đa giác.

Có thể một cách để phát hiện thay đổi bản vẽ? hoặc xóa google.maps.drawing.OverlayType.POLYGON nhưng đặt lại nếu đa giác hiện tại đã bị xóa?

Answer 1

documentation.

1. Bắt đầu từ this sample.

2. giấu sự kiểm soát bản vẽ trong trường hợp polygoncomplete

   drawingManager.setOptions({ 
        drawingControl: false 
       }); 
   

3. thêm sự kiểm soát bản vẽ trong hàm deleteSelectedShape

   drawingManager.setOptions({ 
       drawingControl: true 
   }); 
   

4. cấu hình các drawingManager chỉ thêm đa giác

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

Đoạn

working example

mã:

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>