绘图图层（库）

  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&loading=async&libraries=drawing&callback=initMap">
</script>

添加 libraries 参数后，即可创建 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} 表示叠加层的类型）中加以指定。例如，圆形的填充属性、描边属性、Z-index 和可点击性均可使用 circleOptions 属性加以指定。如果传递了任何大小、位置或地图值，系统会忽略这些默认属性。如需详尽地了解可以设置哪些属性，请参阅 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）处于停用状态。