Capa de dibujo (biblioteca)

  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 constituyen una biblioteca independiente, separada del código de JavaScript principal de la API de Google Maps. Para usar las funciones que contiene 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&loading=async&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, así como 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 de google.maps.drawing.OverlayType. El valor predeterminado es null, el cual hace que el cursor se encuentre en un modo que no permite dibujar 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 de google.maps.ControlPosition.
    • drawingModes: Es un array de constantes google.maps.drawing.OverlayType que define los tipos de superposiciones que se incluirán en el selector de formas del control de dibujo. El ícono de la mano siempre estará presente para que el usuario pueda interactuar con el mapa sin dibujar. El orden de las herramientas del control coincidirá con el orden en que estas se declaran en el array.
  • Cuando se crea una superposición, es posible asignarle a cada tipo un conjunto de propiedades predeterminadas que definen su aspecto. Estas se establecen en la propiedad {overlay}Options de la superposición ({overlay} representa el tipo de superposición). Por ejemplo, las propiedades de relleno de un círculo, las propiedades de trazo, el índice Z y la posibilidad de hacer clics se pueden establecer con la propiedad circleOptions. Si se pasan valores de tamaño, ubicación o mapas, estos elementos se ignorarán. Para obtener más información sobre qué propiedades se pueden configurar, consulta la documentación de referencia de la API.

Nota: Para lograr que una forma sea editable por 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;
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
Ver ejemplo

Prueba la muestra

Cómo actualizar el control de herramientas de dibujo

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

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

Para ocultar o mostrar el control de herramientas de dibujo, establece lo siguiente:

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

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

Para quitar el control de herramientas de dibujo del objeto map, establece 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 permanecen disponibles. De esta manera, puedes implementar tu propio control si lo deseas. Quitar el DrawingManager del objeto map hace que se inhabiliten todas las funciones de dibujo. Por lo tanto, debes adjuntarlo nuevamente al mapa con drawingManager.setMap(map), o con un nuevo objeto DrawingManager construido, si deseas restablecer los atributos de dibujo.

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.): en este caso, se pasa una referencia a la superposición como argumento
  • Un evento overlaycomplete: se pasa un literal de objeto, que contiene el OverlayType y una referencia a la superposición, como 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 cuando se dibuja en el mapa.