Drawing Library

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

DrawingManager 類別

google.maps.drawing.DrawingManager 類別

可讓使用者在地圖上繪製標記、多邊形、折線、矩形和圓形。DrawingManager 的繪圖模式會定義使用者將建立的疊加層類型。在地圖中新增控制項,讓使用者可以切換繪圖模式。

此類別會擴充 MVCObject

使用 &libraries=drawing 網址參數載入。請參閱 Maps JavaScript API 中的程式庫

使用 v=beta 時,可透過呼叫 const {DrawingManager} = await google.map.importLibrary("drawing") 來存取請參閱 Maps JavaScript API 中的程式庫

DrawingManager
DrawingManager([options])
參數:
建立可讓使用者在地圖上繪製疊加層的 DrawingManager,並利用繪圖控制項進行繪製。
getDrawingMode
getDrawingMode()
參數:
傳回值:OverlayType|null
傳回 DrawingManager 的繪圖模式。
getMap
getMap()
參數:
傳回值:Map
傳回附加 DrawingManagerMap,也就是用來建立疊加層的 Map
setDrawingMode
setDrawingMode(drawingMode)
參數:
傳回值:
變更 DrawingManager 的繪製模式,以定義要在地圖上新增的疊加層類型。系統接受的值為 'marker''polygon''polyline''rectangle''circle'nullnull 的繪圖模式代表使用者能夠正常與地圖互動,且點擊不會繪製任何內容。
setMap
setMap(map)
參數:
傳回值:
DrawingManager 物件附加至指定的 Map
setOptions
setOptions(options)
參數:
傳回值:
設定 DrawingManager 的選項。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
circlecomplete
function(circle)
引數:
  • circleCircle使用者剛繪製的圓圈。
使用者完成圓圈後,就會觸發這個事件。
markercomplete
function(marker)
引數:
  • markerMarker使用者剛繪製的標記。
使用者完成標記繪製後,就會觸發此事件。
overlaycomplete
function(event)
引數:
使用者完成繪製所有類型的疊加層後,就會觸發此事件。
polygoncomplete
function(polygon)
引數:
  • polygonPolygon使用者剛繪製的多邊形。
使用者完成多邊形繪製後,就會觸發此事件。
polylinecomplete
function(polyline)
引數:
  • polylinePolyline使用者剛繪製的折線。
使用者完成折線繪製作業時,會引發此事件。
rectanglecomplete
function(rectangle)
引數:
  • rectangleRectangle使用者剛繪製的矩形。
使用者完成繪製矩形後,就會觸發這個事件。

DrawingManagerOptions 介面

google.maps.drawing.DrawingManagerOptions 介面

繪圖管理員的選項。

使用 &libraries=drawing 網址參數載入。請參閱 Maps JavaScript API 中的程式庫

circleOptions optional
類型:CircleOptions optional
套用至任何使用這個DrawingManager建立的新社交圈的選項。系統會忽略 centerradius 屬性,且新圓形的 map 屬性一律會設為 DrawingManager 的地圖。
drawingControl optional
類型:boolean optional
預設:true
繪圖控制項的啟用/停用狀態。
drawingControlOptions optional
類型:DrawingControlOptions optional
顯示控制項的顯示選項。
drawingMode optional
類型:OverlayType optional
DrawingManager 的繪圖模式,用於定義要在地圖上新增的疊加層類型。系統接受的值為 'marker''polygon''polyline''rectangle''circle'nullnull 的繪圖模式代表使用者能夠正常與地圖互動,且點擊不會繪製任何內容。
map optional
類型:Map optional
附加 DrawingManagerMap,也就是用來建立疊加層的 Map
markerOptions optional
類型:MarkerOptions optional
套用至任何使用這個 DrawingManager 建立的新標記的選項。系統會忽略 position 屬性,而且新標記的 map 屬性一律會設為 DrawingManager 的地圖。
polygonOptions optional
類型:PolygonOptions optional
套用至任何使用這個 DrawingManager 建立的新多邊形的選項。系統會忽略 paths 屬性,且新多邊形的 map 屬性一律會設為 DrawingManager 的地圖。
polylineOptions optional
類型:PolylineOptions optional
套用至任何使用此 DrawingManager 建立的新折線的選項。path 屬性會被忽略,而新折線的 map 屬性一律會設為 DrawingManager 的地圖。
rectangleOptions optional
類型:RectangleOptions optional
套用至任何使用這個 DrawingManager 建立的新矩形的選項。系統會忽略 bounds 屬性,且新矩形的 map 屬性一律會設為 DrawingManager 的地圖。

DrawingControlOptions 介面

google.maps.drawing.DrawingControlOptions 介面

顯示繪圖控制項的選項。

使用 &libraries=drawing 網址參數載入。請參閱 Maps JavaScript API 中的程式庫

drawingModes optional
類型:Array<OverlayType> optional
繪圖控制項中顯示的顯示模式 (依顯示順序顯示)。系統會一律提供手繪圖示 (對應於 null 繪圖模式),而且不應在這個陣列中指定。
position optional
類型:ControlPosition optional
位置 ID。用於指定地圖上控制項的位置。

OverlayCompleteEvent 介面

google.maps.drawing.OverlayCompleteEvent 介面

DrawingManager 上疊加層完成事件的屬性。

使用 &libraries=drawing 網址參數載入。請參閱 Maps JavaScript API 中的程式庫

overlay
完成的重疊。
type
類型:OverlayType
完整疊加層的類型。

OverlayType 常數

google.maps.drawing.OverlayType 常數

可由 DrawingManager 建立的疊加層類型。您可以使用值或透過常數名稱指定這些值。例如 'polygon'google.maps.drawing.OverlayType.POLYGON

使用 &libraries=drawing 網址參數載入。請參閱 Maps JavaScript API 中的程式庫

使用 v=beta 時,可透過呼叫 const {OverlayType} = await google.map.importLibrary("drawing") 來存取請參閱 Maps JavaScript API 中的程式庫

CIRCLE 指定 DrawingManager 會建立圓形,且 overlaycomplete 事件中指定的疊加層為圓形。
MARKER 指定 DrawingManager 建立標記,且 overlaycomplete 事件中指定的疊加層是標記。
POLYGON 指定 DrawingManager 會建立多邊形,且 overlaycomplete 事件中指定的疊加層是一個多邊形。
POLYLINE 指定 DrawingManager 建立折線,且 overlaycomplete 事件中指定的疊加層為折線。
RECTANGLE 指定 DrawingManager 會建立矩形,且 overlaycomplete 事件中指定的疊加層為矩形。