總覽
DrawingManager
類別提供圖形介面,讓使用者可以在地圖上繪製多邊形、矩形、折線、圓形和標記。
使用程式庫
繪圖工具是一種獨立的程式庫,與主要的 Maps API JavaScript 程式碼不同。如要使用這個程式庫中的功能,您必須先在 Maps API Bootstrap 網址中使用 libraries
參數載入這個程式庫:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
加入程式庫參數後,您可以按照下列方式建立 DrawingManager
物件:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
DrawingManager 選項
DrawingManager
建構函式會採用一組選項,分別定義要顯示的一組控制項、控制項的位置,以及起始繪圖狀態。
DrawingManager
的drawingMode
屬性會定義 DrawingManager 的起始繪圖狀態,並接受google.maps.drawing.OverlayType
常數。預設值為null
,在這種情況下,DrawingManager 初始化完成後,游標會處於非繪圖模式。DrawingManager
的drawingControl
屬性會定義地圖上繪製工具選取介面的顯示設定,並接受布林值。- 您也可以使用
DrawingManager
的drawingControlOptions
屬性定義控制項的位置,以及要顯示在控制項中的疊加層類型。position
會定義地圖上繪圖控制項的位置,並接受google.maps.ControlPosition
常數。drawingModes
是google.maps.drawing.OverlayType
常數的陣列,用於定義要納入繪圖控制項形狀選擇器中的疊加層類型。系統會一律顯示手形圖示,讓使用者不須繪圖就能與地圖互動。工具在控制項中的順序,與在陣列中宣告的順序相符。
- 您可以為每種疊加層類型指定一組預設屬性,藉此定義疊加層初次建立時的外觀。這些屬性可在相應疊加層的
{overlay}Options
屬性中定義 (其中{overlay}
代表疊加層類型)。舉例來說,您可以使用circleOptions
屬性定義圓形的填滿屬性、筆劃屬性、zIndex,以及可點擊屬性。如果傳遞任何尺寸、位置或地圖值,系統就會略過這些屬性。如要進一步瞭解可供設定的屬性,請參閱 API 參考資料說明文件。
注意:如要讓形狀在建立後可供使用者編輯,請將 editable
屬性設為 true
。
TypeScript
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, } ); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); } window.initMap = initMap;
測試範例程式碼
更新繪圖工具控制項
建立 DrawingManager
物件後,如要更新,您可以呼叫 setOptions()
並傳遞新值。
drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, drawingModes: ['marker'] } });
如要隱藏或顯示繪圖工具控制項:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
如要從 map
物件中移除繪圖工具控制項:
drawingManager.setMap(null);
「隱藏」繪圖控制項後,地圖上就不會顯示繪圖工具控制項,不過您仍可使用 DrawingManager
類別的所有功能。如此一來,您就可以視需要自行導入控制項。從 map
物件中「移除」DrawingManager
會停用所有繪圖功能。如要還原繪圖功能,就必須使用 drawingManager.setMap(map)
加回地圖,或是建構新的 DrawingManager
物件。
繪圖事件
形狀疊加層建立後會觸發兩個事件:
{overlay}complete
事件 (其中{overlay}
代表疊加層類型,例如circlecomplete
、polygoncomplete
等)。疊加層的參照是以引數的形式傳遞。overlaycomplete
事件。這是一個物件常值,其中包含OverlayType
以及疊加層的參照,會以引數的形式傳遞。
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) { var radius = circle.getRadius(); }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { if (event.type == 'circle') { var radius = event.overlay.getRadius(); } });
請注意,在地圖上繪圖時,系統會停用 google.maps.Map
事件 (例如 click
和 mousemove
)。