Drawing-Ebene (Bibliothek)

1. Übersicht
2. Bibliothek verwenden
3. DrawingManager-Optionen
4. Steuerelement der Zeichentools aktualisieren
5. Drawing-Ereignisse

Ü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, die unabhängig vom JavaScript-Hauptcode für die Maps API ist. Damit Sie die Funktionen der Bibliothek nutzen können, müssen Sie sie zuerst mithilfe des libraries-Parameters in der Bootstrap-URL der Maps API laden:

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

So erstellen Sie ein DrawingManager-Objekt, nachdem Sie den Parameter „libraries“ hinzugefügt haben:

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

DrawingManager-Optionen

Für den DrawingManager-Konstruktor wird eine Reihe von Optionen angegeben, um festzulegen, welche Steuerelemente angezeigt werden sollen, und die Position der Steuerelemente und den anfänglichen Zeichenmodus zu definieren.

• Mit der Eigenschaft drawingMode für den DrawingManager wird der anfängliche DrawingManager-Zeichnungszustand festgelegt. Für sie kann eine google.maps.drawing.OverlayType-Konstante angegeben werden. Der Standardwert ist null. In diesem Fall befindet sich der Cursor nicht im Zeichenmodus, wenn der DrawingManager initialisiert wird.
• Mit der Eigenschaft drawingControl für den DrawingManager wird definiert, ob die Oberfläche zur Auswahl der Zeichentools auf der Karte angezeigt werden soll. Die Eigenschaft akzeptiert einen booleschen Wert.
• Mit der Eigenschaft drawingControlOptions für den DrawingManager lassen sich die Position der Steuerelemente sowie die Overlay-Typen, die dort dargestellt werden sollen, definieren.
  • position definiert die Position der Zeichensteuerelemente auf der Karte. Der Wert kann eine google.maps.ControlPosition-Konstante sein.
  • drawingModes ist ein Array von google.maps.drawing.OverlayType-Konstanten und definiert die Overlay-Typen, die in der Zeichensteuerelement-Formauswahl enthalten sein sollen. Das Handsymbol ist immer vorhanden. Es ermöglicht dem Nutzer, mit der Karte zu interagieren, ohne zu zeichnen. Die Reihenfolge der Tools in den Steuerelementen entspricht der Reihenfolge, in der sie im Array deklariert sind.
• Jedem Overlay-Typ kann eine Reihe von Standardeigenschaften zugewiesen werden, die die Darstellung des Overlays bei seiner Erstellung definieren. Sie werden in der {overlay}Options-Eigenschaft des Overlays definiert, wobei {overlay} den Overlay-Typ repräsentiert. Die Füll- und Stricheigenschaften, der Z-Index und die Anklickbarkeit eines Kreises können zum Beispiel über die circleOptions-Eigenschaft definiert werden. Wenn Werte zur Größe, zum Standort oder zur Karte übergeben werden, werden diese ignoriert. Umfassende Informationen dazu, welche Eigenschaften festgelegt werden können, finden Sie in der API-Referenzdokumentation.

Hinweis: Um eine Form nach ihrer Erstellung für Nutzer bearbeitbar zu machen, setzen Sie ihre editable-Eigenschaft auf true.

// 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

// 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

Steuerelement mit Zeichentools aktualisieren

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

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

So blenden Sie das Zeichentools-Steuerelement aus oder 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);

Wenn das Zeichensteuerelement ausgeblendet wird, wird das Zeichentools-Steuerelement nicht angezeigt. Sämtliche Funktionen der DrawingManager-Klasse sind aber weiterhin verfügbar. Auf diese Weise können Sie bei Bedarf eigene Steuerelemente implementieren. Wird der DrawingManager aus dem map-Objekt entfernt, werden alle Zeichenfunktionen deaktiviert. Um sie wiederherzustellen, muss er mit drawingManager.setMap(map) wieder zur Karte hinzugefügt werden oder es muss ein neues DrawingManager-Objekt erstellt werden.

Drawing-Ereignisse

Beim Erstellen eines Form-Overlays werden zwei Ereignisse ausgelöst:

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

google.maps.Map-Ereignisse wie click und mousemove sind deaktiviert, während auf der Karte gezeichnet wird.