Capa (biblioteca) de dibujo

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
  1. Descripción general
  2. Cómo usar la biblioteca
  3. Opciones de DrawingManager
  4. Cómo actualizar el control de herramientas de dibujo
  5. Eventos de dibujo

Descripción general

La clase DrawingManager proporciona una interfaz gráfica para que los usuarios dibujen polígonos, rectángulos, polilíneas, círculos y marcadores en el mapa.

Cómo usar la biblioteca

Las herramientas de dibujo son una biblioteca independiente separada del código JavaScript principal de la API de Google Maps. Para usar la funcionalidad contenida en esta biblioteca, primero debes cargarla con el parámetro libraries en la URL de arranque de la API de Google Maps:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>

Una vez que hayas agregado el parámetro de bibliotecas, puedes crear un objeto DrawingManager de la siguiente manera:

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

Opciones de DrawingManager

El constructor DrawingManager toma un conjunto de opciones que definen el conjunto de controles que se mostrarán, la posición del control y el estado inicial del dibujo.

  • La propiedad drawingMode de DrawingManager define el estado de dibujo inicial de DrawingManager. Acepta una constante google.maps.drawing.OverlayType. El valor predeterminado es null, en cuyo caso el cursor está en un modo que no es de dibujo cuando se inicializa DrawingManager.
  • La propiedad drawingControl de DrawingManager define la visibilidad de la interfaz de selección de herramientas de dibujo en el mapa. Acepta un valor booleano.
  • También puedes definir la posición del control y los tipos de superposiciones que deben representarse en él, mediante la propiedad drawingControlOptions de DrawingManager.
    • position define la posición del control de dibujo en el mapa y acepta una constante google.maps.ControlPosition.
    • drawingModes es un arreglo de constantes google.maps.drawing.OverlayType y define los tipos de superposiciones que se incluirán en el selector de formas de control de dibujo. El ícono de la mano siempre estará presente, lo que permitirá al usuario interactuar con el mapa sin dibujar. El orden de las herramientas en el control coincidirá con el orden en el que se declaran en el arreglo.
  • A cada tipo de superposición se le puede asignar un conjunto de propiedades predeterminadas, que definen la apariencia de la superposición cuando se crea por primera vez. Estas se definen en la propiedad {overlay}Options de esa superposición ({overlay} representa el tipo de superposición). Por ejemplo, las propiedades de relleno de un círculo, las propiedades de trazo, zIndex y la posibilidad de hacer clics se pueden definir con la propiedad circleOptions. Si se pasan valores de tamaño, ubicación o mapas, estos se ignorarán. Para obtener información detallada sobre las propiedades que se pueden establecer, consulta la documentación de referencia de la API.

Nota: Para que una forma sea editable para el usuario después de crearla, establece su propiedad editable en 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;
Ver ejemplo

Probar la muestra

Cómo actualizar el control de herramientas de dibujo

Una vez que se haya creado el objeto DrawingManager, puedes actualizarlo llamando a setOptions() y pasando valores nuevos.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Para ocultar o mostrar el control de herramientas de dibujo:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Para quitar el control de herramientas de dibujo del objeto map, haz lo siguiente:

drawingManager.setMap(null);

Ocultar el control de dibujo hace que no se muestren las herramientas de dibujo, pero todas las funcionalidades de la clase DrawingManager aún estarán disponibles. De esta manera, puedes implementar tu propio control si lo deseas. Si quitas el DrawingManager del objeto map, se inhabilitan todas las funciones de dibujo; para restablecer los atributos de dibujo, se debe volver a adjuntar al mapa con drawingManager.setMap(map) o con un objeto DrawingManager nuevo.

Eventos de dibujo

Cuando se crea una superposición de forma, se activan dos eventos:

  • Un evento {overlay}complete (en el que {overlay} representa el tipo de superposición, como circlecomplete, polygoncomplete, etcétera) Se pasa una referencia a la superposición como argumento.
  • Un evento overlaycomplete Un literal de objeto, que contiene el OverlayType y una referencia a la superposición, se pasa como un argumento.
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();
  }
});

Ten en cuenta que los eventos google.maps.Map, como click y mousemove, se inhabilitan mientras se dibujan en el mapa.