Drawing-Ebene (Bibliothek)

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
  1. Übersicht
  2. Mediathek verwenden
  3. Zeichnungsmanager-Optionen
  4. Aktualisierung des Zeichentools-Steuerelements
  5. Zeichenereignisse

Übersicht

Die Klasse DrawingManager bietet Nutzern eine grafische Oberfläche zum Zeichnen von Polygonen, Rechtecken, Polylinien, Kreisen und Markierungen auf der Karte.

Bibliothek verwenden

Die Zeichentools sind eine eigenständige Bibliothek, getrennt vom Hauptcode der Maps API. Wenn Sie die in dieser Bibliothek enthaltenen Funktionen verwenden möchten, müssen Sie sie zuerst mit dem Parameter libraries in der Bootstrap-URL der Maps API laden:

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

Nachdem Sie den Parameter „bibliotheks“ hinzugefügt haben, können Sie ein DrawingManager-Objekt so erstellen:

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

DrawingManager-Optionen

Der Konstruktor DrawingManager verwendet eine Reihe von Optionen, die die anzuzeigenden Steuerelemente, die Position des Steuerelements und den anfänglichen Zeichenstatus definieren.

  • Das Attribut drawingMode von DrawingManager definiert den anfänglichen Zeichenstatus von ZeichnenManager. Sie akzeptiert eine google.maps.drawing.OverlayType-Konstante. Die Standardeinstellung ist null. In diesem Fall befindet sich der Cursor in einem Nicht-Zeichenmodus, wenn der Zeichnenmanager initialisiert wird.
  • Das Attribut drawingControl von DrawingManager definiert die Sichtbarkeit der Oberfläche zur Auswahl der Zeichentools auf der Karte. Sie akzeptiert einen booleschen Wert.
  • Mit der Property drawingControlOptions von DrawingManager kannst du auch die Position des Steuerelements und die Overlay-Typen festlegen, die im Steuerelement dargestellt werden sollen.
    • position definiert die Position des Zeichensteuerelements auf der Karte und akzeptiert eine google.maps.ControlPosition-Konstante.
    • drawingModes ist ein Array von google.maps.drawing.OverlayType-Konstanten und definiert die Overlay-Typen, die in die Zeichensteuerelement-Formauswahl aufgenommen werden sollen. Das Handsymbol ist immer vorhanden, sodass der Nutzer mit der Karte interagieren kann, ohne zu zeichnen. Die Reihenfolge der Tools im Steuerelement entspricht der Reihenfolge, in der sie im Array deklariert sind.
  • Jedem Overlay-Typ kann eine Reihe von Standardattributen zugewiesen werden, die die Darstellung des Overlays beim ersten Erstellen definieren. Diese sind in der {overlay}Options-Property des Overlays definiert, wobei {overlay} den Overlay-Typ darstellt. Beispielsweise können die Fülleigenschaften, die Stricheigenschaften, der zIndex und die Anklickbarkeit eines Kreises mit der Property circleOptions definiert werden. Wenn Werte zur Größe, zum Standort oder zur Karte übergeben werden, werden diese ignoriert. Ausführliche Informationen zu den Attributen, die festgelegt werden können, finden Sie in der API-Referenzdokumentation.

Hinweis: Wenn du eine Form nach dem Erstellen für Nutzer bearbeitbar machen möchtest, setze die Property editable auf 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;
Beispiel ansehen

Beispiel ausprobieren

Steuerelement der Zeichenwerkzeuge aktualisieren

Nachdem das DrawingManager-Objekt erstellt wurde, können Sie es durch Aufrufen von setOptions() aktualisieren und neue Werte übergeben.

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

So blenden Sie das Steuerelement der Zeichenwerkzeuge aus bzw. ein:

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

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

So entfernen Sie das Zeichentools-Steuerelement aus dem map-Objekt:

drawingManager.setMap(null);

Wird das Zeichensteuerelement ausgeblendet, wird das Zeichentools-Steuerelement nicht angezeigt. Alle Funktionen der DrawingManager-Klasse sind aber weiterhin verfügbar. Auf diese Weise können Sie bei Bedarf eigene Steuerelemente implementieren. Wenn Sie DrawingManager aus dem Objekt map entfernen, werden alle Zeichenfunktionen deaktiviert. Wenn die Zeichenfunktionen wiederhergestellt werden sollen, muss die Karte wieder mit drawingManager.setMap(map) verknüpft oder ein neues DrawingManager-Objekt erstellt werden.

Drawing-Ereignisse

Beim Erstellen einer Formüberlagerung werden zwei Ereignisse ausgelöst:

  • Ein {overlay}complete-Ereignis, wobei {overlay} den Overlay-Typ darstellt, z. B. circlecomplete, polygoncomplete usw. Ein Verweis auf das Overlay wird als Argument übergeben.
  • Ein overlaycomplete-Ereignis. Es wird ein Objekt-Literal, das OverlayType und einen Verweis auf das Overlay enthält, als Argument übergeben.
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();
  }
});

Beachten Sie, dass google.maps.Map-Ereignisse wie click und mousemove beim Zeichnen auf der Karte deaktiviert sind.