繪圖圖層 (程式庫)

透過集合功能整理內容 你可以依據偏好儲存及分類內容。
  1. 簡介
  2. 使用程式庫
  3. DrawingManager 選項
  4. 更新繪圖工具控制項
  5. 繪圖事件

總覽

DrawingManager 類別提供圖形介面,方便使用者在地圖上繪製多邊形、矩形、折線、圓形和標記。

使用程式庫

繪圖工具是獨立的程式庫,與主要的 Maps API JavaScript 程式碼分開提供。如要使用這個程式庫提供的功能,您必須先使用 Maps API 啟動網址中的 libraries 參數載入:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>

新增程式庫參數後,您可以按照下列方式建立 DrawingManager 物件:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

DrawingManager 選項

DrawingManager 建構函式接受一組選項,用於定義要顯示的控制項組合、控制項的位置和初始繪圖狀態。

  • DrawingManagerdrawingMode 屬性會定義 DrawingManager 的初始繪圖狀態。它接受 google.maps.drawing.OverlayType 常數。預設值為 null,在此情況下,遊標會在初始化 DrawingManager 時處於非繪圖模式。
  • DrawingManagerdrawingControl 屬性會定義地圖上繪製工具選取介面的顯示設定。可接受布林值。
  • 您也可以使用 DrawingManagerdrawingControlOptions 屬性定義控制項的位置,以及應在控制項中使用的疊加層類型。
    • position 定義地圖上的繪圖控制項位置,並接受 google.maps.ControlPosition 常數。
    • drawingModesgoogle.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} 代表疊加層類型,例如 circlecompletepolygoncomplete 等)。系統會將疊加層的參照傳遞為引數。
  • 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 事件 (例如 clickmousemove)。