自定義圖形控件[Google地圖v3繪圖庫]

我正在使用Google Maps API的繪圖庫，我想用自定義按鈕觸發標記的繪製。自定義圖形控件[Google地圖v3繪圖庫]

我已經閱讀文檔的這一部分：

隱藏繪圖控制使繪圖工具控制爲不顯示，但所有的DrawingManager類的功能仍然可用。這樣，如果需要，您可以實施自己的控制。從地圖對象中移除DrawingManager將禁用所有繪圖功能;如果要恢復繪圖要素，則必須使用drawingManager.setMap（map）將其重新附加到地圖上，或者創建一個新的DrawingManager對象。

但我找不出如何使用DrawingManager來做到這一點。

來源

2012-02-23 tdurand

按鈕點擊：

接通繪圖標記： drawingManager.setDrawingMode（google.maps.drawing.OverlayType.MARKER）;

關閉： drawingManager.setDrawingMode（null）;

來源

2012-02-23 20:56:40 user1226919

謝謝，這是我一直在尋找;-) – tdurand 2012-02-24 02:45:28

同樣適用於，OverlayType.CIRCLE， OverlayType.POLYGON – Sam 2015-10-05 10:24:29

您可以：

創建的DrawingManager不受管制，或某些控件被忽略，那麼
添加自定義按鈕它們，然後
添加處理這些按鈕來觸發函數@ user1226919提到。

例子：

var drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingControl: false 
}); 
drawingManager.setMap(map); 

// drawingManager is now ready 

var marker_btn = document.createElement("button"); 
marker_btn.innerHTML = "Create Marker"; 

// add handlers 
marker_btn.addEventListener("click", (function() { 
    // closure handles local toggle variables 
    var toggled = false; 
    var originalHTML = marker_btn.innerHTML; 
    return function (e) { 
     if (toggled) { 
      drawingManager.setDrawingMode(null); 
      e.target.innerHTML = originalHTML; 
     } else { 
      drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER); 
      e.target.innerHTML = "Cancel"; 
     } 
     toggled = !toggled; 
    } 
})()); 

// add button to map controls 
map.controls[ google.maps.ControlPosition.TOP_CENTER ].push(marker_btn);

退房具有自定義多邊形按鈕的工作示例：https://codepen.io/bozdoz/pen/jZNXNP?editors=0010

來源

2018-01-28 21:53:42 bozdoz

自定義圖形控件[Google地圖v3繪圖庫]

回答

相關問題