Livello di disegno (Raccolta)

1. Panoramica
2. Utilizzo della Raccolta
3. Opzioni di disegno
4. Aggiornamento del controllo degli strumenti di disegno
5. Eventi di disegno

Panoramica

La classe DrawingManager offre agli utenti un'interfaccia grafica per disegnare poligoni, rettangoli, polilinee, cerchi e indicatori sulla mappa.

Utilizzare la Raccolta

Gli strumenti di disegno sono una libreria autonoma, separata dal codice JavaScript principale dell'API di Google Maps. Per utilizzare la funzionalità contenuta in questa libreria, devi innanzitutto caricarla utilizzando il parametro libraries nell'URL di bootstrap dell'API di Google Maps:

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

Dopo aver aggiunto il parametro Library, puoi creare un oggetto DrawingManager nel seguente modo:

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

Opzioni di DrawingManager

Il costruttore DrawingManager prende un insieme di opzioni che definiscono il set di controlli da visualizzare, la posizione del controllo e lo stato di disegno iniziale.

• La proprietà drawingMode di DrawingManager definisce lo stato di disegno iniziale di DrawingManager. Accetta una costante google.maps.drawing.OverlayType. L'impostazione predefinita è null, nel qual caso il cursore è in modalità non disegna quando viene inizializzato il disegno.
• La proprietà drawingControl di DrawingManager definisce la visibilità dell'interfaccia di selezione degli strumenti di disegno sulla mappa. Accetta un valore booleano.
• Puoi anche definire la posizione del controllo e i tipi di overlay da rappresentare nel controllo, utilizzando la proprietà drawingControlOptions di DrawingManager.
  • position definisce la posizione del controllo di disegno sulla mappa e accetta una costante google.maps.ControlPosition.
  • drawingModes è un array di costanti google.maps.drawing.OverlayType e definisce i tipi di overlay da includere nel selettore della forma di controllo del disegno. L'icona della mano sarà sempre presente, consentendo all'utente di interagire con la mappa senza tracciare. L'ordine degli strumenti nel controllo corrisponderà all'ordine in cui sono dichiarati nell'array.
• A ogni tipo di overlay puoi assegnare un insieme di proprietà predefinite, che definiscono l'aspetto della sovrapposizione al momento della creazione. Questi sono definiti nella proprietà {overlay}Options di quell'overlay (dove {overlay} rappresenta il tipo di overlay). Ad esempio, le proprietà di riempimento, le proprietà tratto, z-index e la cliccabilità di un cerchio possono essere definite con la proprietà circleOptions. Se vengono trasmessi valori di dimensioni, località o mappa, questi vengono ignorati. Per informazioni dettagliate sulle proprietà che possono essere impostate, consulta la documentazione di riferimento delle API.

Nota: per rendere una forma modificabile dall'utente dopo che è stata creata, imposta la relativa proprietà editable su 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

Nota:leggi la guida all'utilizzo di TypeScript e Google Maps.

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

Nota:il codice JavaScript è compilato dallo snippet TypeScript.

Visualizza esempio

Prova anteprima

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Aggiornamento del controllo Strumenti di disegno

Dopo aver creato l'oggetto DrawingManager, puoi aggiornarlo chiamando setOptions() e trasmettendo i nuovi valori.

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

Per nascondere o mostrare il controllo degli strumenti di disegno:

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

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

Per rimuovere il controllo degli strumenti di disegno dall'oggetto map:

drawingManager.setMap(null);

Nascondere il controllo di disegno fa sì che gli strumenti di disegno non vengano visualizzati, ma tutte le funzionalità della classe DrawingManager sono ancora disponibili. In questo modo, puoi implementare il tuo controllo, se lo desideri. La rimozione di DrawingManager dall'oggetto map disattiva tutte le funzionalità di disegno; deve essere ricollegata alla mappa con drawingManager.setMap(map) o creato un nuovo oggetto DrawingManager se devono essere ripristinati gli elementi di disegno.

Eventi di disegno

Quando viene creato un overlay di forma, vengono attivati due eventi:

• Un evento {overlay}complete (dove {overlay} rappresenta il tipo di overlay, ad esempio circlecomplete, polygoncomplete e così via). Un riferimento all'overlay viene trasmesso come argomento.
• Un evento overlaycomplete. Un valore letterale di oggetto, contenente OverlayType e un riferimento all'overlay, viene passato come argomento.

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();
  }
});

Tieni presente che gli eventi google.maps.Map, come click e mousemove, vengono disattivati durante il disegno sulla mappa.