Formen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Plattform auswählen: Android iOS JavaScript

Sie können verschiedenste Formen zu Ihrer Karte hinzufügen. Eine Form ist ein Objekt auf der Karte, das an eine Koordinate für Breiten- und Längengrad gebunden ist. Folgende Formen sind verfügbar: Linien, Polygone, Kreise und Rechtecke. Sie können Ihre Formen auch so konfigurieren, dass Nutzer sie bearbeiten oder ziehen können.

Polylinien

Um eine Linie auf Ihrer Karte zu zeichnen, verwenden Sie eine Polylinie. Die Klasse Polyline definiert ein lineares Overlay, das aus verbundenen Liniensegmenten auf der Karte besteht. Ein Polyline-Objekt besteht aus einem Array mit LatLng-Standorten und erstellt eine Folge von Liniensegmenten, die diese Standorte in einer geordneten Reihenfolge miteinander verbinden.

Polylinien hinzufügen

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

Polyline-Objekte werden als Reihe von geraden Segmenten auf der Karte gezeichnet. Sie können beim Erstellen der Linie benutzerdefinierte Farben, Stärke und Deckkraft der Linie in PolylineOptions festlegen oder diese Eigenschaften nach der Konstruktion ändern. Folgende Strichformate werden von Polylinien unterstützt:

  • strokeColor gibt eine hexadezimale HTML-Farbe im Format "#FFFFFF" an. Die Klasse Polyline unterstützt keine benannten Farben.
  • strokeOpacity gibt einen numerischen Wert zwischen 0.0 und 1.0 an, um die Deckkraft der Farbe der Linie zu bestimmen. Der Standardwert ist 1.0.
  • strokeWeight gibt die Linienbreite in Pixeln an.

Die editable-Property der Polylinie gibt an, ob Nutzer die Form bearbeiten können. Weitere Informationen finden Sie unten im Abschnitt Vom Nutzer bearbeitbare Formen. Ebenso kannst du die Property draggable festlegen, damit Nutzer die Linie ziehen können.

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

Polylinien entfernen

Wenn Sie eine Polylinie von 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);

Beachten Sie, dass die Polylinie mit der obigen Methode nicht gelöscht wird. Die Polylinie wird von der Karte entfernt. Wenn Sie stattdessen die Polylinie löschen möchten, sollten Sie sie von der Karte entfernen und die Polylinie selbst auf null setzen.

Polylinien prüfen

Polylinien werden durch eine Reihe von Koordinaten in Form eines Arrays mit LatLng-Objekten angegeben. Diese Koordinaten bestimmen den Pfad der Linie. Rufen Sie zum Abrufen der Koordinaten 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 LatLng bei einem angegebenen nullbasierten Indexwert zurück.
  • insertAt() fügt einen übergebenen LatLng-Wert bei einem angegebenen nullbasierten Indexwert ein. Beachten Sie, dass vorhandene Koordinaten bei diesem Indexwert weiter verschoben werden.
  • removeAt() entfernt eine LatLng bei einem angegebenen nullbasierten Indexwert.

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

Polylinien anpassen

Sie können vektorbasierte Grafiken mit der Form von Symbolen zu einer Polylinie hinzufügen. Mit einer Kombination aus Symbolen und der Klasse PolylineOptions haben Sie viel Kontrolle über das Design von Polylinien auf Ihrer Karte. Weitere Informationen zu Pfeilen, gestrichelten Linien, benutzerdefinierten Symbolen und animierten Symbolen finden Sie unter Symbole.

Polygone

Ein Polygon stellt einen Bereich dar, der von einem geschlossenen Pfad (oder einer Schleife) umgeben ist, 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 Farben, Stärke und Deckkraft der Kante des Polygons (die Strichstärke) und benutzerdefinierte Farben und Deckkraft für den eingeschlossenen Bereich (die Füllung) definieren. Farben müssen im hexadezimalen HTML-Format 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 sind.
  • Bereiche mit Löchern
  • Überschneidungen in einem oder mehreren Bereichen.

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

Hinweis: In der Datenschicht können Sie Polygone einfach zeichnen. Sie übernimmt die Polygonkurven für Sie, was das Zeichnen von Polygonen mit Löchern erleichtert. Weitere Informationen finden Sie in der Dokumentation zur Datenschicht.

Polygone hinzufügen

Da eine Polygonfläche mehrere separate Pfade umfassen kann, gibt das Attribut paths des Polygon-Objekts ein Array von Arrays vom Typ MVCArray 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 paths-Property gespeichert wird. Die API bietet eine einfache getPath()-Methode für Polygone, die aus einem Pfad bestehen.

Die editable-Property des Polygons gibt an, ob Nutzer die Form bearbeiten können. Weitere Informationen finden Sie unten im Abschnitt Vom Nutzer bearbeitbare Formen. Ebenso kannst du die Property draggable festlegen, damit Nutzer die Form ziehen können.

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

Autovervollständigen von Polygonen

Die Polygon im Beispiel oben besteht aus vier Sätzen von LatLng-Koordinaten. Beachten Sie jedoch, dass die erste und letzte Gruppe denselben Standort definieren, wodurch die Schleife abgeschlossen wird. In der Praxis müssen Sie jedoch den letzten Satz von Koordinaten nicht angeben, da Polygone geschlossene Bereiche definieren. Die Maps JavaScript API füllt das Polygon automatisch aus. Dazu wird ein Strich gezogen, der die letzte Position wieder mit der ersten Position eines beliebigen Pfads verbindet.

Das folgende Beispiel ist mit dem vorherigen identisch, nur dass das letzte LatLng weggelassen wird: Beispiel ansehen.

Polygone entfernen

Um ein Polygon aus der Karte zu entfernen, rufen Sie die Methode setMap() auf und übergeben Sie null als Argument. Im folgenden Beispiel ist bermudaTriangle ein Polygon-Objekt:

bermudaTriangle.setMap(null);

Beachten Sie, dass das Polygon mit der obigen Methode nicht gelöscht wird. Das Polygon wird aus der Karte entfernt. Wenn Sie stattdessen das Polygon löschen möchten, sollten Sie es von der Karte entfernen und das Polygon selbst 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 Array mit Blatt ist ein Array von LatLng-Koordinaten, die einen einzelnen Pfad angeben. Rufen Sie die Methode getPaths() des Polygon-Objekts auf, um diese Koordinaten abzurufen. Da das Array ein MVCArray ist, müssen Sie es mit den folgenden Vorgängen bearbeiten und prüfen:

  • getAt() gibt LatLng bei einem angegebenen nullbasierten Indexwert zurück.
  • insertAt() fügt einen übergebenen LatLng-Wert bei einem angegebenen nullbasierten Indexwert ein. Beachten Sie, dass vorhandene Koordinaten bei diesem Indexwert weiter verschoben werden.
  • removeAt() entfernt eine LatLng bei einem angegebenen nullbasierten Indexwert.

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

Loch in einem Polygon erstellen

Um einen leeren Bereich innerhalb eines Polygons zu erstellen, müssen Sie zwei Pfade erstellen, einen innerhalb des anderen. Zum Erstellen des Lochs müssen die Koordinaten, die den inneren Pfad definieren, in der entgegengesetzten Reihenfolge liegen, in denen die den äußeren Pfad definieren. Wenn die Koordinaten des äußeren Pfads beispielsweise im Uhrzeigersinn angegeben sind, muss der innere Pfad gegen den Uhrzeigersinn gedreht werden.

Hinweis: Die Datenschicht verarbeitet die Reihenfolge der inneren und äußeren Pfade. Dadurch ist es einfacher, Polygone mit Löchern zu zeichnen. Weitere Informationen finden Sie in der Dokumentation zur Datenschicht.

Im folgenden Beispiel wird ein Polygon mit zwei Pfaden gezeichnet, wobei der innere Pfad in die entgegengesetzte Richtung des äußeren Pfads gewunden ist.

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

Rechtecke

Zusätzlich zu einer generischen Polygon-Klasse enthält die Google Maps JavaScript API eine spezifische Klasse für Rectangle-Objekte, die die Erstellung vereinfachen.

Rechtecke hinzufügen

Ein Rectangle ähnelt einem Polygon insofern, als Sie benutzerdefinierte Farben, Stärke und Deckkraft der Kante des Rechtecks (die Strichstärke) und benutzerdefinierte Farben und Deckkraft für den Bereich innerhalb des Rechtecks (die Füllung) definieren können. Farben müssen als hexadezimale numerische HTML-Art angegeben werden.

Im Gegensatz zu Polygon definieren Sie paths nicht für Rectangle. Stattdessen hat ein Rechteck ein bounds-Attribut, das seine Form definiert. Dazu wird ein google.maps.LatLngBounds für das Rechteck angegeben.

Die Eigenschaft editable des Rechtecks gibt an, ob Nutzer die Form bearbeiten können. Weitere Informationen finden Sie unten im Abschnitt Vom Nutzer bearbeitbare Formen. Ebenso kannst du die Property draggable festlegen, damit Nutzer das Rechteck ziehen können.

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

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

TypeScript

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

JavaScript

// 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;
Beispiel ansehen

Beispiel ausprobieren

Rechtecke entfernen

Um ein Rechteck aus der Karte zu entfernen, rufen Sie die Methode setMap() auf und übergeben Sie dabei null als Argument.

rectangle.setMap(null);

Beachten Sie, dass das Rechteck mit der obigen Methode nicht gelöscht wird. Das Rechteck wird von der Karte entfernt. Wenn Sie stattdessen das Rechteck löschen möchten, sollten Sie es von der Karte entfernen und dann das Rechteck selbst auf null setzen.

Kreise

Zusätzlich zur generischen Klasse Polygon enthält die Google Maps JavaScript API eine spezifische Klasse für Circle-Objekte, die die Erstellung vereinfachen.

Kreise hinzufügen

Ein Circle ähnelt einem Polygon insofern, als Sie benutzerdefinierte Farben, Stärke und Deckkraft der Kante des Kreises (die "Umrandungslinie") sowie benutzerdefinierte Farben und Deckkraft für den eingeschlossenen Bereich (die "Füllung") definieren. Farben müssen in einem numerischen hexadezimalen HTML-Format angegeben werden.

Im Gegensatz zu Polygon definieren Sie paths nicht für Circle. Stattdessen hat ein Kreis zwei zusätzliche Eigenschaften, die seine Form definieren:

  • center gibt die google.maps.LatLng der Mitte des Kreises an.
  • radius gibt den Radius des Kreises in Metern an.

Die Eigenschaft editable des Kreises gibt an, ob Nutzer die Form bearbeiten können. Weitere Informationen finden Sie unten im Abschnitt Vom Nutzer bearbeitbare Formen. Ebenso kannst du die Property draggable so festlegen, dass Nutzer den Kreis ziehen können.

TypeScript

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

JavaScript

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;
Beispiel ansehen

Beispiel ausprobieren

Kreise entfernen

Um einen Kreis von der Karte zu entfernen, rufen Sie die Methode setMap() auf und übergeben als Argument null.

circle.setMap(null);

Beachten Sie, dass der Kreis mit der obigen Methode nicht gelöscht wird. Der Kreis wird von der Karte entfernt. Wenn Sie stattdessen den Kreis löschen möchten, sollten Sie ihn von der Karte entfernen und dann den Kreis selbst auf null setzen.

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

Wenn Sie eine Form bearbeitbar machen, werden Ziehpunkte zur Form hinzugefügt, mit denen Nutzer die Form direkt auf der Karte neu positionieren, ihre Form ändern und ihre Größe anpassen können. Sie können eine Form auch dragbar machen, sodass Nutzer sie an eine andere Stelle auf der Karte verschieben können.

Vom Benutzer vorgenommene Änderungen am Objekt haben nur für die Dauer der jeweiligen Sitzung Gültigkeit. Wenn du die Änderungen des Nutzers speichern möchtest, musst du die Informationen selbst erfassen und speichern.

Ermöglichen, dass eine Form bearbeitet werden kann

Alle Formen (Polylinien, Polygone, Kreise und Rechtecke) können als vom Nutzer bearbeitbar festgelegt werden. 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

Ermöglichen, dass eine Form gezogen werden kann

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 Formoptionen 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 das Ziehen für ein Polygon oder eine Polylinie aktivieren, sollten Sie das Polygon oder die Polylinie geodätisch machen. Setzen Sie dazu das Attribut geodesic auf true.

Ein geodätisches Polygon behält seine tatsächliche geografische Form bei, wenn es verschoben wird, sodass das Polygon verzerrt dargestellt wird, wenn es in der Mercator-Projektion nach Norden oder Süden verschoben wird. Nicht geodätische Polygone behalten immer ihr anfängliches Erscheinungsbild auf dem Bildschirm bei.

In einer geodätischen Polylinie werden die Segmente der Polylinie als kürzester Pfad zwischen zwei Punkten auf der Erdoberfläche gezeichnet, sofern die Erde eine Kugel ist – im Gegensatz zu geraden Linien auf der Mercator-Projektion.

Weitere Informationen zu Koordinatensystemen findest du in der Anleitung zu Karten- und Kachelkoordinaten.

Die folgende Karte zeigt zwei Dreiecke mit ungefähr gleicher Größe und ungefähr gleichen Abmessungen. Für das rote Dreieck ist die Property geodesic auf true festgelegt. Beachten Sie, wie sich seine Form ändert, während es nach Norden verschoben wird.

Beispiel ansehen

Reaktionen auf Bearbeitungsereignisse

Wenn eine Form bearbeitet wird, wird nach Abschluss der Bearbeitung ein Ereignis ausgelöst. Diese Ereignisse sind unten aufgeführt.

Form Ereignisse
Kreis radius_changed
center_changed
Polygon insert_at
remove_at
set_at

Der Listener muss im Pfad des Polygons festgelegt werden. Wenn das Polygon mehrere Pfade hat, muss für jeden Pfad ein Listener festgelegt werden.

Polyline insert_at
remove_at
set_at

Der Listener muss auf den Pfad der Polylinie gesetzt werden.

Rechteck bounds_changed

Einige hilfreiche Codebeispiele:

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.');
});

Ein Beispiel für die Verarbeitung eines Bearbeitungsereignisses auf einem Rechteck finden Sie hier.

Reaktionen auf Ziehereignisse

Wenn eine Form gezogen wird, werden Ereignisse beim Start und Ende der Ziehaktion sowie während des Ziehens ausgelöst. Die folgenden Ereignisse werden für Polylinien, Polygone, Kreise und Rechtecke ausgelöst.

Veranstaltung Beschreibung
dragstart Wird ausgelöst, wenn der Nutzer beginnt, die Form zu ziehen
drag Wird wiederholt ausgelöst, während der Nutzer die Form zieht
dragend Wird ausgelöst, wenn der Benutzer das Ziehen der Form beendet.

Weitere Informationen zum Umgang mit Ereignissen finden Sie in der Dokumentation zu Ereignissen.