Camada de desenho (biblioteca)

  1. Visão geral
  2. Uso da biblioteca
  3. Opções do DrawingManager
  4. Atualizar o controle de ferramentas de desenho
  5. Eventos de desenho

Visão geral

O DrawingManager oferece uma interface gráfica para desenhar 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. Carregue essa biblioteca usando o parâmetro libraries no URL de inicialização da API Maps para usar as funcionalidades dela:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&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 aceita um conjunto de opções que definem o grupo de controles a ser exibido, a posição do controle e o estado inicial do desenho.

  • A propriedade drawingMode do DrawingManager define o estado inicial de desenho do DrawingManager. Ela aceita uma constante google.maps.drawing.OverlayType. O padrão é null. Nesse caso, o cursor está em um modo de não desenho quando o DrawingManager é inicializado.
  • A propriedade drawingControl do DrawingManager define a visibilidade da interface de seleção de ferramentas de desenho no mapa. Ela aceita um valor booleano.
  • Também é possível definir a posição do controle e os tipos de sobreposições a serem 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, que define os tipos de sobreposição a serem incluídos no seletor de forma de controle de desenho. O ícone da mão sempre está presente, ou seja, a pessoa pode interagir com o mapa sem desenhar. A ordem das ferramentas no controle corresponde à ordem em que são declaradas na matriz.
  • Um conjunto de propriedades padrão pode ser atribuído a cada tipo de sobreposição, definindo a aparência da sobreposição quando criada pela primeira vez. Elas são definidas na propriedade {overlay}Options da sobreposição, em que {overlay} representa o tipo. Por exemplo, as propriedades de preenchimento, traço, zIndex e capacidade de receber cliques de um círculo são definidas com a propriedade circleOptions. Todos os valores de tamanho, localização ou mapa passados são ignorados. Para saber tudo sobre quais propriedades podem ser definidas, consulte a documentação de Referência da API.

Observação: para fazer com que uma forma possa ser editada pelo usuário após ser criada, 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;
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
Exemplo

Testar amostra

Atualizar o controle de ferramentas de desenho

Para atualizar um objeto DrawingManager depois que ele foi criado, chame setOptions() e transmita os 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 de ferramentas de desenho do objeto map:

drawingManager.setMap(null);

Quando o controle de desenho é oculto, as ferramentas de desenho não aparecem, mas toda a funcionalidade da classe DrawingManager permanece disponível. Dessa forma, você pode implementar seu próprio controle. Remover o DrawingManager do objeto map desativa todas as funcionalidades de desenho. Inclua-o novamente no mapa com drawingManager.setMap(map) ou em um novo objeto DrawingManager construído se for preciso restaurar os recursos de desenho.

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, entre outros. Uma referência para a sobreposição é passada como argumento.
  • Um evento overlaycomplete. Um literal de objeto contendo o OverlayType e uma referência para a sobreposição são passados 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();
  }
});

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