繪製多邊形點時獲取經緯度

Question

我正在試圖在Google地圖上繪製多邊形時獲取多邊形的緯度經度。有人知道繪製多邊形點時會觸發什麼事件。 基本上我想要做的是撤消/重做多邊形功能。所以當用戶繪製2點時，點擊撤消，那麼它應該能夠在一次點擊中刪除1點。

由於地圖點擊事件在繪製多邊形時被禁用瞭如何獲取經緯度點？我想要做什麼？任何人都可以幫助我嗎？我可以參考的任何鏈接或例子？

下面是我的代碼來繪製多邊形：

drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingMode: google.maps.drawing.OverlayType.POLYGON, 
    drawingControl: false, 
    polygonOptions: { 
     strokeWeight: 2, 
     fillOpacity: 0.2, 
     editable: true, 
     fillColor: '#FFF000', 
     strokeColor: '#FFF000', 
     geodesic: true, 
     suppressUndo: true 
    }, 
    polylineOptions: { 
     editable: false, 
     suppressUndo: true 
    } 
}); 

drawingManager.setMap(map); 

Answer 1

試試這個

VAR myPoly; google.maps.event.addListener（DrawingManager會， 'polygoncomplete'，函數（多邊形）{

 myPoly = polygon; 


     get_coordinates(polygon);//call to get coordinates 


     //editing polygon function 
     google.maps.event.addListener(polygon.getPath(), 'set_at', function() { 

      get_coordinates(polygon);//call to get coordinates 
     }); 



     var newShape = polygon.overlay; 
     //newShape.type = polygon.type; 
     google.maps.event.addListener(newShape, 'click', function() { 
      setSelection(newShape); 
     }); 

     setSelection(newShape); 

    }); 

和獲得座標函數

//函數來獲取多邊形 功能get_coordinates的座標（多邊形） {

 var full_path = [];//initialize array for set coordinates. 
     polygon.getPath().forEach(function(elem, index){ 

      full_path.push(elem.toUrlValue()); 

     }); 

     return full_path; 

    } 

Answer 2

確定。我可以給你你所需要的。你可以用下面的最後一個代碼進行整合。的所有職能，不能刪除任何一點，但代替它。

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); 
    } 
    } 

    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, 
     markerOptions: { 
     draggable: true 
     }, 
     polylineOptions: { 
     editable: true 
     }, 
     rectangleOptions: polyOptions, 
     circleOptions: polyOptions, 
     polygonOptions: polyOptions, 
     map: map 
    }); 

    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; 
     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);