Drawing-Ebene (Bibliothek)

Übersicht
Bibliothek verwenden
DrawingManager-Optionen
Steuerelement der Zeichentools aktualisieren
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&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 können Optionen angegeben werden, mit denen sich die anzuzeigenden Steuerelemente, die Position der Steuerelemente sowie der anfängliche Zeichnungszustand definieren lassen.

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.
Die Eigenschaft drawingControl für den DrawingManager definiert die Sichtbarkeit der Oberfläche zur Zeichentoolauswahl auf der Karte. Die Eigenschaft akzeptiert einen booleschen Wert.
Mithilfe der drawingControlOptions-Eigenschaft für den DrawingManager können Sie auch die Position des Steuerelements sowie die Overlay-Typen, die im Steuerelement repräsentiert werden sollen, definieren.
- position definiert die Position des Zeichensteuerelements auf der Karte und akzeptiert eine Konstante des Typs google.maps.ControlPosition.
- 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 im Steuerelement entspricht der Reihenfolge ihrer Deklaration im Array.
Jedem Overlay-Typ kann ein Satz von Standardeigenschaften zugewiesen werden, die das Erscheinungsbild des Overlays bei seiner Erstellung definieren. Diese sind in der {overlay}Options-Eigenschaft dieses Overlays definiert, wobei {overlay} den Overlay-Typ repräsentiert. Die Füll- und Stricheigenschaften, der z-Index-Wert und die Anklickbarkeit eines Kreises können zum Beispiel über die circleOptions-Eigenschaft festgelegt 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.

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

Beispiel ansehen

Testbeispiel

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Steuerelement der 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. Wenn der DrawingManager aus dem map-Objekt entfernt wird, werden alle Zeichenfunktionen deaktiviert. Wenn die Zeichenfunktionen wiederhergestellt werden sollen, 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.