繪圖圖層 (程式庫)

  1. 總覽
  2. 使用程式庫
  3. DrawingManager 選項
  4. 更新繪圖工具控制項
  5. 繪圖事件

總覽

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;
index.ts

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;
index.js
查看範例

測試範例程式碼

更新繪圖工具控制項

建立 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)。