Livello disegno (raccolta)

  1. Panoramica
  2. Utilizzare la Raccolta
  3. Opzioni di DrawingManager
  4. Aggiornamento del controllo Strumenti di disegno
  5. Eventi di disegno

Panoramica

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

Utilizzo della Raccolta

Gli strumenti di disegno sono una libreria indipendente, separata dalla struttura di Maps il codice JavaScript dell'API. Per utilizzare la funzionalità contenuta in questa libreria, devi prima caricarlo utilizzando il parametro libraries nella URL del bootstrap dell'API di Google 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 librerie, puoi creare un DrawingManager come segue:

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

Opzioni di DrawingManager

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

  • La proprietà drawingMode di DrawingManager definisce il valore iniziale nello stato del disegno di DrawingManager. Accetta google.maps.drawing.OverlayType costante. Il valore predefinito è null, nel qual caso il cursore si trova in un elemento non di disegno all'inizializzazione di DrawingManager.
  • La proprietà drawingControl di DrawingManager definisce visibilità dell'interfaccia di selezione degli strumenti di disegno sulla mappa. Accetta valore booleano.
  • Puoi anche definire la posizione del controllo e i tipi di gli overlay che devono essere rappresentati nel controllo, utilizzando proprietà drawingControlOptions di DrawingManager.
    • position definisce la posizione del controllo del disegno sulla mappa e accetta un google.maps.ControlPosition costante.
    • drawingModes è un array di costanti di google.maps.drawing.OverlayType e definisce i tipi di overlay da includere nella forma di controllo del disegno selettore. L'icona a forma di mano sarà sempre presente, consentendo all'utente di interagire con la mappa senza disegnare. L'ordine degli strumenti nella corrisponde all'ordine in cui vengono dichiarati nell'array.
  • A ogni tipo di overlay può essere assegnato un insieme di proprietà predefinite, definiscono l'aspetto dell'overlay al momento della creazione. Si definiscono nella proprietà {overlay}Options dell'overlay (dove {overlay} rappresenta il tipo di overlay). Ad esempio, le proprietà di riempimento di un cerchio, il tratto proprietà, zIndex e cliccabilità possono essere definiti con il circleOptions proprietà. I valori trasmessi per dimensioni, località o mappa vengono ignorati. Per informazioni dettagliate sulle proprietà impostabili, consulta documentazione di riferimento API.

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

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

Prova Sample

Aggiornamento del controllo Strumenti di disegno

Dopo aver creato l'oggetto DrawingManager, puoi aggiornarlo chiamando setOptions() e passando 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. Rimozione del DrawingManager dall'oggetto map disattiva tutte le funzionalità di disegno; questo elemento deve essere riagganciato alla mappa con drawingManager.setMap(map) o una nuova DrawingManager oggetto costruito, se è necessario ripristinare le caratteristiche 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). R il riferimento all'overlay viene passato come argomento.
  • Un evento overlaycomplete. Un valore letterale oggetto, contenente OverlayType e un riferimento all'overlay vengono passati 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 google.maps.Map come click e mousemove vengono disattivati mentre disegni sulla mappa.