一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

绘图层(库)

  1. 概览
  2. 使用库
  3. DrawingManager 选项
  4. 更新绘图工具控件
  5. 绘图事件

概览

DrawingManager 类提供了一个图形界面,以供用户在地图上绘制多边形、矩形、折线、圆形和标记。

使用库

绘图工具是一种独立于主 Maps API JavaScript 代码的自包含库。要使用此库中包含的功能,必须先在 Maps API bootstrap 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 常量。
    • drawingModes:一个 google.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
需要帮助?请访问我们的支持页面