Formen und Linien

Sie können einer Karte verschiedene Formen hinzufügen. Eine Form ist ein Objekt auf der Karte, das mit Koordinaten für Längen- und Breitengrad verbunden ist. Folgende Formen sind verfügbar: Linien, Polygone, Kreise und Rechtecke. Sie können Formen auch so konfigurieren, dass Nutzer sie bearbeiten oder ziehen können.

Polylinien

Wenn Sie eine Linie auf einer Karte zeichnen möchten, verwenden Sie eine Polylinie. Die Polyline-Klasse definiert ein lineares Overlay, das aus verbundenen Liniensegmenten auf der Karte besteht. Ein Polyline-Objekt besteht aus einem Array mit LatLng-Positionen und erstellt eine Folge von Liniensegmenten, die diese Orte in einer geordneten Reihenfolge miteinander verbinden.

Polylinien hinzufügen

Für den Polyline-Konstruktor werden eine Reihe von PolylineOptions angegeben, mit denen die LatLng-Koordinaten der Linie sowie eine Reihe von Stilen für das visuelle Verhalten der Polylinie festgelegt werden.

Polyline-Objekte werden als Folge gerader Segmente auf der Karte gezeichnet. Sie können beim Konstruieren der Linie benutzerdefinierte Werte für Farbe, Stärke und Deckkraft des Linienstrichs in den PolylineOptions angeben. Alternativ lassen sich diese Eigenschaften auch nach der Konstruktion ändern. Für Polylinien werden folgende Strichstile unterstützt:

• strokeColor gibt die Farbe als HTML-Hexadezimalwert im Format "#FFFFFF" an. Die Polyline-Klasse unterstützt keine Farbnamen.
• strokeOpacity gibt einen numerischen Wert zwischen 0.0 und 1.0 für die Deckkraft der Linienfarbe an. Der Standardwert ist 1.0.
• strokeWeight gibt die Breite der Linie in Pixeln an.

Die editable-Eigenschaft der Polylinie gibt an, ob der Nutzer die Form bearbeiten kann. Weitere Informationen finden Sie unter Formen, die vom Nutzer bearbeitet und gezogen werden können unten. Über die Eigenschaft draggable legen Sie fest, dass Nutzer die Linie ziehen können.

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js

Polylinien entfernen

Wenn Sie eine Polylinie aus der Karte entfernen möchten, rufen Sie die Methode setMap() auf und übergeben Sie dabei null als Argument. Im folgenden Beispiel ist flightPath ein Polylinienobjekt:

flightPath.setMap(null);

Die Polylinie wird mit der Methode oben nicht gelöscht. Sie wird lediglich aus der Karte entfernt. Wenn Sie sie löschen möchten, müssen Sie sie aus der Karte entfernen und dann auf null setzen.

Polylinien prüfen

Für eine Polylinie werden Koordinaten als Array von LatLng-Objekten angegeben. Nach diesen Koordinaten richtet sich der Verlauf der Linie. Um die Koordinaten abzurufen, rufen Sie getPath() auf. Dadurch wird ein Array vom Typ MVCArray zurückgegeben. Sie können das Array mit den folgenden Vorgängen bearbeiten und prüfen:

• getAt() gibt den LatLng-Wert bei einem gegebenen nullbasierten Indexwert zurück.
• insertAt() fügt einen übergebenen LatLng-Wert bei einem gegebenen nullbasierten Indexwert ein. Alle vorhandenen Koordinaten bei diesem Indexwert werden weiter verschoben.
• removeAt() entfernt einen LatLng-Wert bei einem gegebenen nullbasierten Indexwert.

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng as google.maps.LatLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js

Polylinien anpassen

Sie können vektorbasierte Bilder in Form von Symbolen zu einer Polylinie hinzufügen. Mit einer Kombination aus Symbolen und der Klasse PolylineOptions lässt sich die Darstellung und das Verhalten von Polylinien auf Karten gut steuern. Unter Symbole finden Sie Informationen zu Pfeilen, gestrichelten Linien, benutzerdefinierten Symbolen und animierten Symbolen.

Polygone

Ein Polygon stellt eine Fläche dar, die von einem geschlossenen Pfad (oder Kreis) umrahmt wird, der durch eine Reihe von Koordinaten definiert ist. Polygon-Objekte ähneln Polyline-Objekten insofern, als sie aus einer Reihe von Koordinaten in einer geordneten Reihenfolge bestehen. Polygone werden mit einem Strich und einem Füllbereich gezeichnet. Sie können benutzerdefinierte Werte für Farbe, Stärke und Deckkraft für den Rand des Polygons (den Strich) sowie benutzerdefinierte Werte für Farbe und Deckkraft des eingeschlossenen Bereichs (den Füllbereich) definieren. Farben müssen als HTML-Hexadezimalwert angegeben werden. Farbnamen werden nicht unterstützt.

Polygon-Objekte können komplexe Formen beschreiben, darunter:

• Mehrere nicht zusammenhängende Bereiche, die durch ein einzelnes Polygon definiert werden
• Bereiche mit Löchern
• Überschneidungen von einem oder mehreren Bereichen

Um eine komplexe Form zu definieren, verwenden Sie ein Polygon mit mehreren Pfaden.

Hinweis: Die Data-Ebene bietet eine einfache Möglichkeit zum Zeichnen von Polygonen. Sie übernimmt das Krümmen des Polygons für Sie, was das Zeichnen von Polygonen mit Löchern erleichtert. Weitere Informationen finden Sie in der Dokumentation zur Data-Ebene.

Polygone hinzufügen

Da eine Polygonfläche mehrere separate Pfade umfassen kann, gibt die Eigenschaft paths des Polygon-Objekts ein aus Arrays vom Typ MVCArray bestehendes Array an. Jedes Array definiert eine separate Folge geordneter LatLng-Koordinaten.

Für einfache Polygone, die nur aus einem Pfad bestehen, können Sie ein Polygon mit einem einzigen Array von LatLng-Koordinaten konstruieren. Die Maps JavaScript API konvertiert das einfache Array bei der Konstruktion in ein Array, wenn es in der Eigenschaft paths gespeichert wird. Die API bietet eine einfache getPath()-Methode für Polygone, die aus einem Pfad bestehen.

Die editable-Eigenschaft des Polygons gibt an, ob der Nutzer die Form bearbeiten kann. Weitere Informationen finden Sie unter Formen, die vom Nutzer bearbeitet und gezogen werden können unten. Über die Eigenschaft draggable legen Sie fest, dass Nutzer die Form ziehen können.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Automatisches Vervollständigen von Polygonen

Das Polygon im Beispiel oben besteht aus vier Sätzen von LatLng-Koordinaten. Da der erste und letzte Satz denselben Ort definieren, wird der Kreis geschlossen. In der Praxis müssen Sie den letzten Satz von Koordinaten nicht angeben, da Polygone geschlossene Bereiche definieren. Die Maps JavaScript API schließt das Polygon automatisch. Dazu wird ein Strich gezogen, der die letzte mit der ersten Position des entsprechenden Pfads verbindet.

Das folgende Beispiel ist mit dem vorherigen identisch. Es wurde nur die letzte LatLng-Angabe weggelassen: Beispiel ansehen

Polygone entfernen

Wenn Sie ein Polygon aus der Karte entfernen möchten, rufen Sie die Methode setMap() auf und übergeben Sie null als Argument. Im folgenden Beispiel ist bermudaTriangle ein Polygonobjekt:

bermudaTriangle.setMap(null);

Das Polygon wird mit der Methode oben nicht gelöscht. Es wird lediglich aus der Karte entfernt. Wenn Sie es löschen möchten, müssen Sie es aus der Karte entfernen und dann auf null setzen.

Polygone prüfen

Ein Polygon wird durch eine Reihe von Koordinaten in Form eines aus Arrays bestehenden Arrays angegeben. Jedes dieser Arrays hat den Typ MVCArray. Jedes End-Array besteht aus LatLng-Koordinaten, die einen einzelnen Pfad definieren. Um diese Koordinaten abzurufen, rufen Sie die Methode getPaths() des Polygon-Objekts auf. Da das Array ein MVCArray ist, müssen Sie es mit den folgenden Vorgängen bearbeiten und prüfen:

• getAt() gibt den LatLng-Wert bei einem gegebenen nullbasierten Indexwert zurück.
• insertAt() fügt einen übergebenen LatLng-Wert bei einem gegebenen nullbasierten Indexwert ein. Alle vorhandenen Koordinaten bei diesem Indexwert werden weiter verschoben.
• removeAt() entfernt einen LatLng-Wert bei einem gegebenen nullbasierten Indexwert.

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

Loch in einem Polygon erstellen

Um einen leeren Bereich innerhalb eines Polygons zu erstellen, müssen Sie zwei Pfade erstellen, einen innerhalb des anderen. Für das Loch müssen die Koordinaten des inneren Pfads in entgegengesetzter Reihenfolge zu den Koordinaten des äußeren Pfads angegeben werden. Werden die Koordinaten des äußeren Pfads beispielsweise im Uhrzeigersinn angegeben, müssen die des inneren Pfads gegen den Uhrzeigersinn angegeben werden.

Hinweis: Die Data-Ebene verwaltet die Reihenfolge der inneren und äußeren Pfade, was das Zeichnen von Polygonen mit Löchern erleichtert. Weitere Informationen finden Sie in der Dokumentation zur Data-Ebene.

Im folgenden Beispiel wird ein Polygon mit zwei Pfaden gezeichnet, wobei der innere Pfad entgegengesetzt zum äußeren Pfad verläuft.

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Rechtecke

Zusätzlich zu einer generischen Polygon-Klasse enthält die Maps JavaScript API auch eine spezielle Klasse für Rectangle-Objekte, die das Erstellen von Rechtecken vereinfacht.

Rechtecke hinzufügen

Ein Rectangle ähnelt einem Polygon insofern, als Sie benutzerdefinierte Werte für Farben, Stärke und Deckkraft der Umrandung des Rechtecks (Strich) und für Farben und Deckkraft des Innenbereichs (Füllung) definieren können. Farben müssen als numerischer HTML-Hexadezimalwert angegeben werden.

Im Gegensatz zu Polygon-Objekten geben Sie keine paths für Rectangle-Objekte an. Die Form von Rechtecken wird stattdessen über eine bounds-Eigenschaft definiert. Dazu wird google.maps.LatLngBounds für das Rechteck angegeben.

Die Eigenschaft editable des Rechtecks gibt an, ob der Nutzer die Form bearbeiten kann. Weitere Informationen finden Sie unter Formen, die vom Nutzer bearbeitet und gezogen werden können unten. Über die Eigenschaft draggable legen Sie fest, dass Nutzer das Rechteck ziehen können.

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js

Mit dem folgenden Code wird jedes Mal ein Rechteck erstellt, wenn der Nutzer den Zoom auf der Karte ändert. Die Größe des Rechtecks richtet sich nach dem Darstellungsbereich.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js

Rechtecke entfernen

Wenn Sie ein Rechteck aus der Karte entfernen möchten, rufen Sie die Methode setMap() auf und übergeben Sie dabei null als Argument.

rectangle.setMap(null);

Das Rechteck wird mit der Methode oben nicht gelöscht. Es wird lediglich aus der Karte entfernt. Wenn Sie es löschen möchten, müssen Sie es aus der Karte entfernen und dann auf null setzen.

Kreise

Zusätzlich zu der generischen Polygon-Klasse enthält die Maps JavaScript API auch eine spezielle Klasse für Circle-Objekte, die das Erstellen von Kreisen vereinfacht.

Kreise hinzufügen

Ein Circle ähnelt einem Polygon insofern, als Sie benutzerdefinierte Werte für Farbe, Stärke und Deckkraft der Umrandung des Kreises (Strich) und für Farbe und Deckkraft des Innenbereichs (Füllung) definieren können. Farben müssen als numerischer HTML-Hexadezimalwert angegeben werden.

Im Gegensatz zu Polygon-Objekten geben Sie keine paths für Circle-Objekte an. Stattdessen wird die Form eines Kreises über zwei zusätzliche Eigenschaften definiert:

• center gibt google.maps.LatLng des Mittelpunkts des Kreises an.
• radius gibt den Radius des Kreises in Metern an.

Die editable-Eigenschaft des Kreises gibt an, ob der Nutzer die Form bearbeiten kann. Weitere Informationen finden Sie unter Formen, die vom Nutzer bearbeitet und gezogen werden können unten. Über die Eigenschaft draggable legen Sie fest, dass Nutzer den Kreis ziehen können.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js

Kreise entfernen

Wenn Sie einen Kreis aus der Karte entfernen möchten, rufen Sie die Methode setMap() auf und übergeben Sie dabei null als Argument.

circle.setMap(null);

Der Kreis wird mit der Methode oben nicht gelöscht. Er wird lediglich aus der Karte entfernt. Wenn Sie ihn löschen möchten, müssen Sie ihn aus der Karte entfernen und dann auf null setzen.

Formen, die vom Nutzer bearbeitet und gezogen werden können

Wenn Sie eine Form bearbeitbar machen, werden ihr Ziehpunkte hinzugefügt, mit denen Nutzer sie direkt auf der Karte umpositionieren, ihre Form ändern und ihre Größe anpassen können. Sie können eine Form auch ziehbar machen, damit Nutzer sie an eine andere Position auf der Karte verschieben können.

Änderungen, die Nutzer am Objekt vornehmen, werden nach der Sitzung verworfen. Wenn Sie sie speichern möchten, müssen Sie die Informationen selbst erfassen und speichern.

Formen bearbeitbar machen

Sie können für alle Formen (Polylinien, Polygone, Kreise und Rechtecke) festlegen, dass sie vom Nutzer bearbeitet werden dürfen. Dazu setzen Sie editable in den Optionen der Form auf true.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Beispiel ansehen

Formen ziehbar machen

Standardmäßig ist die Position einer auf der Karte gezeichneten Form nicht veränderbar. Damit Nutzer eine Form an eine andere Position auf der Karte ziehen können, setzen Sie draggable in den Optionen der Form auf true.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Wenn Sie Polygone oder Polylinien ziehbar machen, sollten Sie sie auch geodätisch machen. Setzen Sie dazu die Eigenschaft geodesic auf true.

Ein geodätisches Polygon behält seine eigentliche geografische Form beim Verschieben bei. Es wird daher verzerrt dargestellt, wenn es in der Mercator-Projektion nach Norden oder Süden verschoben wird. Nicht geodätische Polygone behalten immer ihr ursprüngliches Aussehen auf dem Bildschirm bei.

Bei einer geodätischen Polylinie werden die Segmente der Polylinie als der kürzeste Weg zwischen zwei Punkten auf der Erdoberfläche gezeichnet. Dabei wird – im Gegensatz zu geraden Linien in der Mercator-Projektion – davon ausgegangen, dass die Erde eine Kugel ist.

Weitere Informationen zu Koordinatensystemen finden Sie im Leitfaden zu Karten- und Kachelkoordinaten.

Die folgende Karte zeigt zwei Dreiecke, deren Größe und Maße in etwa übereinstimmen. Für das rote Dreieck ist die geodesic-Eigenschaft auf true gesetzt. Wenn Sie es nach Norden verschieben, können Sie sehen, wie sich seine Form ändert.

Beispiel ansehen

Auf Bearbeitungsereignisse warten

Beim Bearbeiten einer Form wird nach Abschluss der Bearbeitung eines der folgenden Ereignisse ausgelöst:

Einige nützliche Code-Snippets:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Beispiel für die Verarbeitung eines Bearbeitungsereignisses für ein Rechteck

Drag-Ereignisse beobachten

Wenn eine Form gezogen wird, werden Ereignisse zu Beginn und Ende des Ziehvorgangs sowie während des Ziehens ausgelöst. Die folgenden Ereignisse werden für Polylinien, Polygone, Kreise und Rechtecke ausgelöst:

Weitere Informationen zum Verarbeiten von Ereignissen finden Sie in der Dokumentation zu Ereignissen.