- Panoramica
- Utilizzare la Raccolta
- Opzioni di DrawingManager
- Aggiornamento del controllo Strumenti di disegno
- 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
diDrawingManager
definisce il valore iniziale nello stato del disegno di DrawingManager. Accettagoogle.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
diDrawingManager
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
diDrawingManager
.position
definisce la posizione del controllo del disegno sulla mappa e accetta ungoogle.maps.ControlPosition
costante.drawingModes
è un array di costanti digoogle.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 ilcircleOptions
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;
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;
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 esempiocirclecomplete
,polygoncomplete
e così via). R il riferimento all'overlay viene passato come argomento. - Un evento
overlaycomplete
. Un valore letterale oggetto, contenenteOverlayType
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.