- Visão geral
- Uso da biblioteca
- Opções do DrawingManager
- Atualizar o controle de ferramentas de desenho
- 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
doDrawingManager
define o estado inicial de desenho do DrawingManager. Ela aceita uma constantegoogle.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
doDrawingManager
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
doDrawingManager
.position
: define a posição do controle de desenho no mapa e aceita uma constantegoogle.maps.ControlPosition
.drawingModes
: uma matriz de constantesgoogle.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 propriedadecircleOptions
. 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;
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;
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, comocirclecomplete
,polygoncomplete
, entre outros. Uma referência para a sobreposição é passada como argumento. - Um evento
overlaycomplete
. Um literal de objeto contendo oOverlayType
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.