绘图层(库)

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
  1. 概览
  2. 使用库
  3. 绘图管理器选项
  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>

添加 libraries 参数后,您可以创建 DrawingManager 对象,如下所示:

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

DrawingManager 选项

DrawingManager 构造函数采用一组选项,以定义要显示的控件集、控件的位置以及初始绘图状态。

  • DrawingManagerdrawingMode 属性定义 DrawManager 的初始绘制状态。它接受 google.maps.drawing.OverlayType 常量。默认值为 null,在此情况下,当 DrawManager 被初始化时,光标会处于非绘图模式。
  • DrawingManagerdrawingControl 属性定义地图上的绘图工具选择界面的可见性。它接受一个布尔值。
  • 您还可以使用 DrawingManagerdrawingControlOptions 属性来定义控件的位置以及控件中应表示的叠加层的类型。
    • position 用于定义绘图控件在地图上的位置,并接受 google.maps.ControlPosition 常量。
    • drawingModesgoogle.maps.drawing.OverlayType 常量数组,用于定义包含在绘图控件形状选择器中的叠加层类型。手形图标会一直存在,让用户无需绘图就能与地图互动。控件中工具的顺序将与数组中这些工具的声明顺序一致。
  • 您可以为每种类型的叠加层分配一组默认属性,用于定义首次创建叠加层时的外观。这些属性是在叠加层的 {overlay}Options 属性中定义的(其中 {overlay} 表示叠加层类型)。例如,圆形的填充属性、描边属性、zIndex 和可点击性可以使用 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;

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)处于停用状态。