Camada de desenho (biblioteca)

  1. Visão geral
  2. Como usar a biblioteca
  3. Opções do DrawManager
  4. Atualização do controle de ferramentas de desenho
  5. Eventos de desenho

Visão geral

A classe DrawingManager fornece uma interface gráfica para que os usuários desenhem polígonos, retângulos, polilinhas, círculos e marcadores no mapa.

Uso da biblioteca

As ferramentas de desenho são uma biblioteca independente, separada do código JavaScript principal da API Maps. Para usar a funcionalidade dessa biblioteca, você precisa primeiro carregá-la usando o parâmetro libraries no URL de inicialização da API Maps:

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

Depois de adicionar o parâmetro de bibliotecas, crie um objeto DrawingManager da seguinte maneira:

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

Opções do DrawingManager

O construtor DrawingManager usa um conjunto de opções que definem o conjunto de controles a serem exibidos, a posição do controle e o estado inicial de desenho.

  • A propriedade drawingMode do DrawingManager define o estado inicial de desenho do DrawManager. Ela aceita uma constante google.maps.drawing.OverlayType. O padrão é null. Nesse caso, o cursor está em um modo não desenhado quando o DrawManager é inicializado.
  • A propriedade drawingControl do DrawingManager define a visibilidade da interface de seleção de ferramentas de desenho no mapa. Ele aceita um valor booleano.
  • Também é possível definir a posição do controle e os tipos de sobreposições que devem ser representados no controle usando a propriedade drawingControlOptions do DrawingManager.
    • position define a posição do controle de desenho no mapa e aceita uma constante google.maps.ControlPosition.
    • drawingModes é uma matriz de constantes google.maps.drawing.OverlayType e define os tipos de sobreposição a serem incluídos no seletor de forma de controle de desenho. O ícone de mão sempre estará presente, permitindo que o usuário interaja com o mapa sem desenhar. A ordem das ferramentas no controle corresponderá à ordem em que são declaradas na matriz.
  • Cada tipo de sobreposição pode receber um conjunto de propriedades padrão, que definem a aparência da sobreposição quando ela é criada. Eles são definidos na propriedade {overlay}Options da sobreposição, em que {overlay} representa o tipo de sobreposição. Por exemplo, as propriedades de preenchimento de um círculo, as propriedades de traço, zIndex e clicabilidade podem ser definidas com a propriedade circleOptions. Todos os valores de tamanho, localização ou mapa passados são ignorados. Para detalhes completos sobre quais propriedades podem ser definidas, consulte a documentação de referência da API.

Observação: para tornar uma forma editável pelo usuário após a criação, defina a propriedade editable como 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 exemplo

Testar amostra

Atualização do controle de ferramentas de desenho

Depois que o objeto DrawingManager for criado, você poderá atualizá-lo chamando setOptions() e transmitindo novos valores.

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

Para ocultar ou mostrar o controle de ferramentas de desenho:

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

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

Para remover o controle das ferramentas de desenho do objeto map:

drawingManager.setMap(null);

Ocultar o controle de desenho faz com que o controle das ferramentas de desenho não seja exibido, mas todas as funcionalidades da classe DrawingManager ainda ficam disponíveis. Dessa forma, você pode implementar seu próprio controle. Remover o DrawingManager do objeto map desativa toda a funcionalidade de desenho. Ele precisa ser reanexado ao mapa com drawingManager.setMap(map) ou um novo objeto DrawingManager construído, se os recursos de desenho precisarem ser restaurados.

Eventos de desenho

Quando uma sobreposição de forma é criada, dois eventos são gerados:

  • Um evento {overlay}complete, em que {overlay} representa o tipo de sobreposição, como circlecomplete, polygoncomplete etc. Uma referência à sobreposição é transmitida como um argumento.
  • Um evento overlaycomplete. Um literal de objeto, que contém o OverlayType e uma referência à sobreposição, é transmitido como um 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();
  }
});

Os eventos da classe google.maps.Map, como click e mousemove, ficam desativados durante o desenho no mapa.