Livello disegno (raccolta)

  1. Panoramica
  2. Utilizzare la Raccolta
  3. Opzioni di DrawingManager
  4. Aggiornare il controllo degli strumenti di disegno
  5. Eventi di disegno

Panoramica

La classe DrawingManager fornisce un'interfaccia grafica che consente agli utenti di disegnare poligoni, rettangoli, polilinee, cerchi e indicatori sulla mappa.

Utilizzo della libreria

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 prima caricarla utilizzando il parametro libraries nell'URL di bootstrap dell'API Maps:

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

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

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

Opzioni di DrawingManager

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

  • La proprietà drawingMode di DrawingManager definisce lo stato di disegno iniziale di DrawingManager. Accetta una costante google.maps.drawing.OverlayType. Il valore predefinito è null. In questo caso, il cursore è in modalità non di disegno quando viene inizializzato DrawingManager.
  • 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 che devono essere rappresentati nel controllo utilizzando la proprietà drawingControlOptions di DrawingManager.
    • position definisce la posizione del controllo del 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 di forme dei controlli del disegno. L'icona a forma di mano sarà sempre presente, consentendo all'utente di interagire con la mappa senza disegnare. L'ordine degli strumenti nel controllo corrisponderà all'ordine in cui sono dichiarati nell'array.
  • A ogni tipo di overlay può essere assegnato un insieme di proprietà predefinite che definiscono l'aspetto dell'overlay al momento della creazione. Questi valori sono definiti nella proprietà {overlay}Options dell'overlay (dove {overlay} rappresenta il tipo di overlay). Ad esempio, le proprietà di riempimento, delle proprietà del tratto, di zIndex e della cliccabilità di un cerchio possono essere definite con la proprietà circleOptions. Se vengono trasmessi valori relativi a dimensioni, località o mappa, questi vengono ignorati. Per informazioni dettagliate sulle proprietà che possono essere impostate, consulta la documentazione di riferimento API.

Nota: per rendere una forma modificabile dall'utente dopo la creazione, 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;

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;
Visualizza esempio

Prova Samples

Aggiornamento del controllo degli strumenti di disegno

Una volta creato l'oggetto DrawingManager, puoi aggiornarlo chiamando setOptions() e trasmettendo 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);

Se nascondi il controllo del disegno, il controllo degli strumenti di disegno non viene visualizzato, ma tutte le funzionalità della classe DrawingManager sono ancora disponibili. In questo modo, se vuoi, puoi implementare il tuo controllo. La rimozione dell'elemento DrawingManager dall'oggetto map disattiva tutte le funzionalità di disegno; deve essere ricollegato alla mappa con drawingManager.setMap(map) oppure viene creato un nuovo oggetto DrawingManager, se è necessario ripristinare le caratteristiche del disegno.

Eventi di disegno

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

  • Un evento {overlay}complete (in cui {overlay} rappresenta il tipo di overlay, ad esempio circlecomplete, polygoncomplete e così via). Un riferimento all'overlay viene passato come argomento.
  • Un evento overlaycomplete. Un valore letterale 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 quando disegni sulla mappa.