您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

繪製圖層 (程式庫)

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

總覽

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

使用程式庫

「繪製工具」是一個獨立的程式庫,不在主要的 Maps API JavaScript 程式碼中。如果要使用此程式庫中所包含的功能,您必須先在 Maps API 啟動程序 URL 中使用 libraries 參數載入它:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</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} 代表疊加層類型)。例如,圓形的填滿屬性、筆觸屬性、zIndex,以及可點選性,都可使用 circleOptions 屬性定義。如果傳遞大小、位置或地圖的值,則會忽略它們。如需可設定屬性的完整詳細資料,請參閱 API 參考文件

注意:如果要在建立形狀之後讓使用者可編輯該形狀,請將其 editable 屬性設為 true

// 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() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', '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);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// 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() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', '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);
}

檢視範例 (drawing-tools.html)

更新繪製工具控制項

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

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁