Google Maps JavaScript API Version 3

Overlays

  1. Übersicht über Overlays
    1. Overlays hinzufügen
    2. Overlays entfernen
  2. Symbole
    1. Vordefinierte Pfade
  3. Markierungen
    1. Markierungsanimationen
    2. Markierungsbild anpassen
      1. Einfache Symbole
      2. Komplexe Symbole
      3. Vektorsymbole
  4. Polylinien
    1. Polylinienoptionen
    2. Polylinien-Arrays
    3. Symbole auf Polylinien
  5. Polygone
    1. Polygonoptionen
    2. Automatisches Vervollständigen für Polygone
    3. Polygon-Arrays
  6. Kreise und Rechtecke
    1. Kreise
    2. Rechtecke
  7. Von Nutzern bearbeitbare Formen
    1. Ereignisse bearbeiten
  8. Zeichnungsbibliothek
    1. DrawingManager-Optionen
    2. Zeichentools-Steuerelement aktualisieren
    3. Zeichenereignisse
  9. Infofenster
  10. Boden-Overlays
  11. Benutzerdefinierte Overlays
    1. Unterklasse von einem Overlay ableiten
    2. Benutzerdefiniertes Overlay initialisieren
    3. Benutzerdefiniertes Overlay zeichnen
    4. Benutzerdefiniertes Overlay entfernen
    5. Benutzerdefiniertes Overlay ausblenden und einblenden

Übersicht über Overlays

Overlays sind Objekte auf der Karte, die an Breitengrad/Längengradkoordinaten gebunden sind und mit der Karte zusammen bewegt werden, wenn Sie diese verschieben oder zoomen. Overlays stehen für Objekte, die Sie zur Karte hinzufügen, um Punkte, Linien, Bereiche oder Sammlungen von Objekten anzugeben.

Das Google Maps API umfasst mehrere Overlay-Typen:

  • Einzelne Standorte auf der Karte werden mithilfe von Markierungen angezeigt. Markierungen zeigen möglicherweise benutzerdefinierte Symbolbilder an. In diesem Fall werden sie gewöhnlich als "Symbole" bezeichnet. Markierungen und Symbole sind Objekte des Typs Marker. Weitere Informationen finden Sie nachfolgend unter Markierungen und Symbole.
  • Linien werden auf der Karte mithilfe von Polylinien dargestellt, die für eine sortierte Abfolge von Standorten stehen. Linien sind Objekte des Typs Polyline. Weitere Informationen finden Sie unter Polylinien.
  • Bereiche mit willkürlicher Form werden auf der Karte mithilfe von Polygonen angezeigt, die Polylinien ähnlich sind. Wie Polylinien sind Polygone eine sortierte Abfolge von Standorten. Anders als diese definieren Polygone eine Region, die sie umschließen. Weitere Informationen finden Sie nachfolgend unter Polygone.
  • Kartenebenen werden mithilfe von Overlay-Kartentypen angezeigt. Sie können Ihren eigenen Kachelsatz erstellen, indem Sie benutzerdefinierte Kartentypen erstellen, die entweder die Basiskarten-Kachelsätze ersetzen oder die als Overlays über den vorhandenen Basiskarten-Kachelsätzen angezeigt werden. Weitere Informationen finden Sie unter Benutzerdefinierte Kartentypen.
  • Das Infofenster ist ebenfalls eine besondere Art von Overlay zum Anzeigen von Inhalten wie Text oder Bildern innerhalb eines Info-Pop-ups auf einer Karte an einem bestimmten Standort. Weitere Informationen finden Sie unter Infofenster.
  • Sie können auch eigene benutzerdefinierte Overlays implementieren. Diese benutzerdefinierten Overlays implementieren die Schnittstelle OverlayView. Weitere Informationen finden Sie unter Benutzerdefinierte Overlays.

Overlays hinzufügen

Overlays werden oft nach der Erstellung zur Karte hinzugefügt. Alle Overlays definieren ein Options-Objekt, das beim Erstellen verwendet werden kann und mit dem Sie die Karte bezeichnen können, auf der die Overlays erscheinen sollen. Sie können ein Overlay auch direkt zur Karte hinzufügen, indem Sie mit der Methode setMap() dem Overlay die Karte übergeben, zu der es hinzugefügt werden soll.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Overlays entfernen

Wenn Sie ein Overlay von einer Karte entfernen möchten, rufen Sie die Methode setMap() des Overlays auf und übergeben Sie null. Beachten Sie, dass das Overlay durch das Aufrufen dieser Methode nicht gelöscht, sondern lediglich von der Karte entfernt wird. Wenn Sie das Overlay stattdessen löschen möchten, sollten Sie es von der Karte entfernen und anschließend für das Overlay selbst den Wert null festlegen.

Wenn Sie eine Gruppe von Overlays verwalten möchten, erstellen Sie ein Array, das die Overlays enthält. Anschließend rufen Sie setMap() für jedes Overlay im Array auf, wenn Sie diese entfernen müssen. Anders als bei Version 2 gibt es keine Methode clearOverlays(). Sie sind für die Verwaltung Ihrer Overlays und ihr Entfernen von der Karte, wenn sie nicht benötigt werden, verantwortlich. Sie können die Overlays löschen, indem Sie sie von der Karte entfernen und dann die length des Arrays auf 0 setzen, wodurch alle Verweise auf die Overlays entfernt werden.

Das folgende Beispiel platziert Markierungen auf einer Karte, wenn auf die Karte geklickt wird, und platziert sie in einem Array. Die Overlays können später entfernt, angezeigt oder gelöscht werden:

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

Beispiel ansehen (overlay-remove.html)

Symbole

Ein Symbol ist ein vektorbasiertes Bild, das auf einem Marker- oder einem Polyline-Objekt angezeigt werden kann. Symbole werden durch einen Pfad unter Verwendung der SVG-Pfadnotation und Optionen definiert, die steuern, wie die Symbole angezeigt werden. Mehrere vordefinierte Symbole sind über die Klasse SymbolPath verfügbar. Während path die einzige erforderliche Eigenschaft ist, unterstützt die Klasse Symbol eine Vielzahl von Eigenschaften, mit denen Sie visuelle Aspekte wie Strich- und Füllfarbe und Stärke anpassen können.

Weitere Informationen zum Anzeigen oder Animieren von Symbolen auf einer Linie finden Sie unter Symbole auf einer Polylinie. Weitere Informationen zur Verwendung eines Symbols als Markierungsbild finden Sie nachfolgend unter Vektorbilder.

Die Klasse Symbol unterstützt die folgenden Eigenschaften. Beachten Sie, dass das Standardverhalten eines Symbols geringfügig variiert, je nachdem, ob es auf einer Markierung oder Polylinie erscheint.

  • path (erforderlich): der Pfad, der die Form des Symbols definiert. Sie können einen der vordefinierten Pfade in google.maps.SymbolPath verwenden oder einen benutzerdefinierten Pfad unter Verwendung der SVG-Pfadnotation definieren. Hinweis: Vektorpfade auf einer Polylinie müssen innerhalb eines Quadrats mit 22 x 22 Pixeln liegen. Wenn Ihr Pfad Punkte außerhalb dieses Quadrats enthält, muss die Eigenschaft "scale" auf einen Bruchwert wie 0,2 angepasst werden, damit das Ergebnis der skalierten Punkte in diesem Quadrat liegt.
  • anchor: die Position des Symbols relativ zur Markierung oder Polylinie. Die Koordinaten des Pfads des Symbols werden durch die x- und y-Koordinaten des Ankers nach links und oben übersetzt. Standardmäßig ist ein Symbol bei (0, 0) verankert. Die Position wird im selben Koordinatensystem wie der Pfad des Symbols ausgedrückt.
  • fillColor: die Füllfarbe des Symbols. Alle CSS3-Farben werden unterstützt. Davon ausgenommen sind nur erweiterte benannte Farben. Der Standardwert für Symbolmarkierungen ist "black". Der Standardwert für Symbole auf Polylinien entspricht der Strichfarbe der entsprechenden Polylinie.
  • fillOpacity: die Deckkraft der Füllung des Symbols, ausgedrückt als Zahl zwischen 0 und 1. Der Standardwert ist 0.
  • rotation: der Winkel, in dem das Symbol gedreht werden soll, in Grad im Uhrzeigersinn ausgedrückt. Standardmäßig hat eine Symbolmarkierung die Rotation 0 und wird ein Symbol auf einer Polylinie in dem Winkel des Randes, auf dem es liegt, gedreht. Die Festlegung der Rotation eines Symbols auf einer Polylinie korrigiert die Rotation des Symbols, sodass sie nicht länger der Krümmung der Linie folgt.
  • scale: der Wert, um den die Symbolgröße skaliert wird. Bei Symbolmarkierungen ist dies standardmäßig 1. Nach der Skalierung kann das Symbol eine beliebige Größe haben. Bei Symbolen auf einer Polylinie ist der Standardwert die Strichstärke der Polylinie. Nach der Skalierung muss das Symbol in einem Quadrat von 22 x 22 Pixeln liegen und am Anker des Symbols zentriert sein.
  • strokeColor: die Strichfarbe des Symbols. Alle CSS3-Farben werden unterstützt. Davon ausgenommen sind nur erweiterte benannte Farben. Der Standardwert für Symbolmarkierungen ist "black". Der Standardwert für Symbole auf einer Polylinie entspricht der Strichfarbe der Polylinie.
  • strokeOpacity: die Deckkraft des Strichs eines Symbols, ausgedrückt als Zahl zwischen 0 und 1. Der Standardwert für Symbolmarkierungen ist 1. Der Standardwert für Symbole auf einer Polylinie entspricht der Strichdeckkraft der Polylinie.
  • strokeWeight: die Strichstärke des Symbols. Standardmäßig die scale des Symbols.

Im folgenden Beispiel wird ein sternförmiges Symbol mit einer hellgelben Füllung und einem dicken gelben Rand erstellt.

var goldStar = {
  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
  fillColor: "yellow",
  fillOpacity: 0.8,
  scale: 1,
  strokeColor: "gold",
  strokeWeight: 14
};

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363, 131.044),
  icon: goldStar,
  map: map
});

Vordefinierte Pfade

Das Google Maps JavaScript API bietet einige integrierte Symbole, die auf Markierungen oder Polylinien angezeigt werden können. Die Standardsymbole beinhalten einen Kreis und zwei Arten von Pfeilen. Da die Ausrichtung eines Symbols auf einer Polylinie fest ist, sind sowohl vorwärts als auch rückwärts zeigende Pfeile verfügbar. Vorwärts bedeutet in der Richtung des Endpunkts der Polylinie. Die enthaltenen Symbole sind:

Name Beschreibung Beispiel
google.maps.SymbolPath.CIRCLE Ein Kreis.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Ein rückwärts zeigender Pfeil, der an allen Seiten geschlossen ist.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Ein vorwärts zeigender Pfeil, der an allen Seiten geschlossen ist.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Ein rückwärts zeigender Pfeil, der an einer Seite offen ist.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Ein vorwärts zeigender Pfeil, der an einer Seite offen ist.

Sie können den Strich oder die Füllung der vordefinierten Symbole mithilfe der Standardsymboloptionen ändern.

Markierungen

Markierungen kennzeichnen Positionen auf einer Karte. Standardmäßig wird für Markierungen ein Standardsymbol verwendet. Sie können jedoch ein benutzerdefiniertes Symbol festlegen, und zwar innerhalb des Konstruktors der Markierung oder indem Sie setIcon() für die Markierung aufrufen. Der google.maps.Marker-Konstruktor verwendet ein einzelnes Marker options-Objektliteral, das die anfänglichen Eigenschaften der Markierung angibt. Die folgenden Felder sind bei der Erstellung einer Markierung besonders wichtig und werden üblicherweise festgelegt:

  • position (erforderlich) gibt eine LatLng zur Bestimmung der anfänglichen Position der Markierung an.
  • map (optional) gibt das Map-Objekt an, auf dem die Markierung platziert werden soll.

Beachten Sie, dass die Karte, auf der die Markierung hinzugefügt werden soll, innerhalb des Marker-Konstruktors angegeben werden muss. Wenn Sie dieses Argument nicht angeben, wird die Markierung zwar erstellt, auf der Karte aber nicht hinzugefügt (oder angezeigt). Sie können die Markierung später über die Methode setMap() der Markierung hinzufügen. Zum Entfernen einer Markierung rufen Sie die Methode setMap() auf und geben null als Argument an.

Markierungen sind interaktiv angelegt. Standardmäßig empfangen Sie z. B. 'click'-Ereignisse und werden oft innerhalb von Ereignis-Listenern verwendet, um Infofenster aufzurufen. Wird die Eigenschaft draggable einer Markierung auf true gesetzt, wird die Markierung auf der Karte vom Nutzer bearbeitbar.

Im folgenden Beispiel wird eine einfache Markierung für den australischen Berg Uluru hinzugefügt:

  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });

Dieser Marker-Titel wird als Kurzinfo angezeigt.

Wenn Sie keine Marker options im Konstruktor der Markierung angeben möchten, geben Sie stattdessen ein leeres Objekt {} im letzten Argument des Konstruktors an.

Beispiel ansehen (marker-simple.html)

Animationen

Sie können Markierungen animieren, sodass sie sich unter den verschiedensten Umständen dynamisch bewegen. Wie eine Markierung animiert wird, wird innerhalb der Eigenschaft animation des Typs google.maps.Animation der Markierung angegeben. Die folgenden Animation-Werte werden zurzeit unterstützt:

  • DROP gibt an, dass die Markierung auf der Karte von oben an ihre Endposition gleiten soll, wenn sie erstmalig auf der Karte platziert wird. Die Animation endet, sobald die Endposition erreicht ist, und animation wird wieder auf null gesetzt. Dieser Animationstyp wird normalerweise bei der Erstellung der Marker angegeben.
  • BOUNCE gibt an, dass die Markierung an einer Stelle "hüpfen" soll. Eine hüpfende Markierung hüpft so lange, bis ihre Eigenschaft animation explizit auf null gesetzt wird.

Sie können eine Animation für eine vorhandene Markierung initiieren, indem Sie setAnimation() für das Objekt Marker aufrufen.

Im folgenden Beispiel wird eine Markierung in Stockholm, Schweden, unter Verwendung einer DROP-Animation erstellt. Durch Klicken auf die Markierung wird die Markierung zwischen einer BOUNCE-Animation und keiner Animation umgeschaltet:

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: stockholm
  };

  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: parliament
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Beispiel ansehen (marker-animations.html)

Hinweis: Wenn Sie viele Markierungen haben, sollten Sie sie nicht alle gleichzeitig auf die Karte gleiten lassen. Sie können setTimeout() verwenden, um die Animationen Ihrer Markierungen in einem wie dem unten abgebildeten Muster räumlich anzuordnen:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Beispiel ansehen (marker-animations-iteration.html)

Markierungsbild anpassen

Markierungen können ein Symbol definieren, das statt des Standardsymbols angezeigt wird. Bevor ein Symbol definiert werden kann, muss eine Reihe von Eigenschaften festgelegt werden, die das visuelle Verhalten der Markierung bestimmt.

Einfache Symbole

Im einfachsten Fall gibt ein Symbol einfach ein Bild an, das anstelle des Standard-Reißzweckensymbols von Google Maps verwendet werden soll. Dazu wird für die Eigenschaft icon der Markierung die URL eines Bildes festgelegt. Das Google Maps API legt in diesem Fall die Größe des Symbols automatisch fest.

Im folgenden Beispiel wird ein Symbol erstellt, das die Position von Bondi Beach in Sydney, Australien, bezeichnet:

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  var image = 'beachflag.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}

Beispiel ansehen (icon-simple.html)

Komplexe Symbole

Mit komplexeren Symbolen werden komplexe Formen angegeben, die anklickbare Regionen bezeichnen. Außerdem werden Schattenbilder hinzugefügt und die "Stapelreihenfolge" angegeben, in der sie relativ zu anderen Overlays angezeigt werden sollen. Bei auf diese Weise angegebenen Symbolen sollte für die Eigenschaften icon und shadowein Objekt des Typs MarkerImage festgelegt werden.

Schattenbilder werden in einem Winkel von 45 Grad (nach oben rechts) zum Vordergrundbild erstellt, und ihre untere linke Ecke wird an der unteren linken Ecke des Vordergrundbilds ausgerichtet. Als Schattenbilder sollten 24-Bit-PNG-Bilder mit Alpha-Transparenz verwendet werden, damit Bildbegrenzungen korrekt auf der Karte angezeigt werden.

MarkerImage-Objekte definieren nicht nur ein Bild, sondern auch die size des Symbols, den origin des Symbols (wenn das gewünschte Bild z. B. Teil eines größeren Bildes in einem Sprite ist) und den anchor, wo sich der Hotspot des Symbols befinden soll (basierend auf dem Ursprung).

Im folgenden Beispiel werden komplexe Markierungen erstellt, um Strände in der Nähe von Sydney zu bezeichnen. Beachten Sie, dass der anchor auf (0,32) gesetzt ist, damit er mit dem Fuß der Fahnenstange zusammenfällt.

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                mapOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

Beispiel ansehen (icon-complex.html)

Vektorsymbole

Eine Markierung unterstützt die Darstellung von Rasterbildern und Vektorpfaden, die als Symbols bezeichnet werden. Übergeben Sie zum Anzeigen eines Vektorpfads ein Symbol-Objektliteral mit dem gewünschten Pfade an die Eigenschaft icon der Markierung. Sie können einen der vordefinierten Pfade in google.maps.SymbolPath verwenden oder einen benutzerdefinierten Pfad unter Verwendung der SVG-Pfadnotation definieren.

Weitere Informationen zu Vektorbildern im Google Maps JavaScript API finden Sie in der Dokumentation zu Symbolen.

Im folgenden Beispiel wird ein Symbol unter Verwendung eines der vordefinierten Vektorpfade erstellt. Ausführlichere Beispiele finden Sie in der Dokumentation zu Symbolen.

marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363882, 131.044922),
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 10
  },
  draggable: true,
  map: map
});

Polylinien

Die Klasse Polyline definiert ein lineares Overlay verbundener Liniensegmente auf der Karte. Ein Polyline-Objekt besteht aus einem Array von LatLng-Positionen und erstellt eine Folge von Liniensegmenten, die diese Positionen in geordneter Reihenfolge verbinden.

Polylinienoptionen

Der Polyline-Konstruktor akzeptiert einen Satz von Polyline options, die die LatLng-Koordinaten der Linie angeben, und einen Satz von Stilen, um das visuelle Verhalten der Polylinie anzupassen.

Polyline-Elemente werden als Folge gerader Segmente auf der Karte gezeichnet. Sie können benutzerdefinierte Farben, Stärken und Deckkraftwerte für den Strich der Linie innerhalb eines Polyline options-Objekts angeben, die zum Aufbauen der Linie verwendet werden, oder diese Eigenschaften nach dem Aufbauen ändern. Eine Polylinie unterstützt die folgenden Strichstile:

  • strokeColor gibt eine hexadezimale HTML-Farbe im Format "#FFFFFF" an. Die Klasse Polyline unterstützt keine benannten Farben.
  • strokeOpacity gibt eine Bruchzahl zwischen 0.0 und 1.0 (Standardwert) der Deckkraft der Linienfarbe an.
  • strokeWeight gibt die Stärke des Linienstrichs in Pixeln an.

Zusätzlich definiert die Eigenschaft editable einer Polylinie, ob diese Form auf der Karte von Nutzern bearbeitbar ist.

Mit dem folgenden Code-Snippet wird eine 2 Pixel breite, rote Polylinie erstellt, die den Pfad des ersten Transpazifikflugs von William Kingsford Smith zwischen Oakland in Kalifornien und Brisbane in Australien kennzeichnet:


function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Beispiel ansehen (polyline-simple.html)

Polylinien-Arrays

Eine Polylinie gibt eine Folge von Koordinaten als Array von LatLng-Objekten an. Rufen Sie zum Abrufen dieser Koordinaten getPath() für die Polyline auf, worauf ein Array des Typs MVCArray zurückgegeben wird. Dieses können Sie mit den folgenden Verfahren bearbeiten und untersuchen:

  • getAt() gibt LatLng bei einem bestimmten nullbasierten Indexwert zurück.
  • insertAt() fügt eine übergebene LatLng-Angabe an einem bestimmten nullbasierten Indexwert ein. Beachten Sie, dass alle vorhandenen Koordinaten an diesem Indexwert vorwärts verschoben werden.
  • removeAt() entfernt eine LatLng-Angabe an einen bestimmten nullbasierten Indexwert.

Hinweis: Es kann nicht einfach das i-Element eines Arrays unter Verwendung der Syntax mvcArray[i] abgerufen werden. Es muss mvcArray.getAt(i) verwendet werden.

Der folgende Code erstellt eine interaktive Karte, die eine Polylinie basierend auf Nutzerklicks aufbaut. Beachten Sie, dass die Polylinie erst erscheint, wenn ihre Eigenschaft path zwei LatLng-Koordinaten enthält.


var poly;
var map;

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var mapOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

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

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

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {MouseEvent} mouseEvent
 */
function addLatLng(event) {

  var 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.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

Beispiel ansehen (polyline-complex.html)

Symbole auf Polylinien

Sie können vektorbasierte Bilder in Form eines Symbols zu einer Polylinie hinzufügen. Legen Sie zum Anzeigen von Symbolen auf einer Polylinie die Eigenschaft icons[] des Objekts PolylineOptions fest. Das Array icons[] akzeptiert ein oder mehr IconSequence-Objektliterale, definiert als:

  • icon (erforderlich): das auf der Linie zu rendernde Symbol. Weitere Informationen zum Anpassen von Symbolen finden Sie unter Symbole.
  • offset: der Abstand vom Anfang der Linie, in dem das Symbol gerendert werden soll. Dieser Abstand kann als Prozentsatz der Linienlänge (z. B. "50 %") oder in Pixeln (z. B. "50 px") ausgedrückt werden. Der Standardwert ist "100 %".
  • repeat: der Abstand zwischen zwei aufeinanderfolgenden Symbolen auf der Linie. Dieser Abstand kann als Prozentsatz der Linienlänge (z. B. "50 %") oder in Pixeln (z. B. "50 px") ausgedrückt werden'). Geben Sie "0" an, um eine Wiederholung des Symbols zu deaktivieren. Der Standardwert ist "0".

Wenn die Polylinie geodätisch ist, werden die angegebenen Abstände für Versatz und Wiederholung standardmäßig in Metern berechnet. Wird entweder der Versatz oder die Wiederholung auf einen Pixelwert gesetzt, werden die Abstände in Pixeln auf dem Bildschirm berechnet.

Mit einer Kombination aus Symbolen und der Klasse PolylineOptions haben Sie viel Kontrolle über die Darstellung von Polylinien auf Ihrer Karte. Hier einige Beispiele für Anpassungen, die Sie vornehmen können.

Pfeile

Verwenden Sie die Eigenschaft IconSequence.offset, um Pfeile am Anfang oder Ende Ihrer Polylinie hinzuzufügen. In diesem Beispiel wird durch Festlegen von 100 % für den Versatz der Pfeil am Ende der Linie platziert.

JavaScript
var lineCoordinates = [
  new google.maps.LatLng(22.291, 153.027),
  new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

var line = new google.maps.Polyline({
  path: lineCoordinates,
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});
Demo

Gestrichelte Linien

Sie können den Effekt gestrichelter Linien erzielen, indem Sie die Deckkraft der Polylinie auf 0 % setzen und ein undurchsichtiges Symbol in einem regelmäßigen Intervall zeichnen.

JavaScript
var lineCoordinates = [
  new google.maps.LatLng(22.291, 153.027),
  new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

var line = new google.maps.Polyline({
  path: lineCoordinates,
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});
Demo

Benutzerdefinierte Pfade

Benutzerdefinierte Symbole ermöglichen Ihnen, viele verschiedene Formen zu einer Polylinie hinzuzufügen.

JavaScript
var lineCoordinates = [
  new google.maps.LatLng(22.291, 153.027),
  new google.maps.LatLng(18.291, 153.027)
];

var symbolOne = {
  path: 'M -2,0 0,-2 2,0 0,2 z',
  strokeColor: '#F00',
  fillColor: '#F00',
  fillOpacity: 1
};

var symbolTwo = {
  path: 'M -2,-2 2,2 M 2,-2 -2,2',
  strokeColor: '#292',
  strokeWeight: 4
};

var symbolThree = {
  path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
  strokeColor: '#00F',
  rotation: 0
};

var line = new google.maps.Polyline({
  path: lineCoordinates,
  icons: [{
    icon: symbolOne,
    offset: '0%'
    },{
      icon: symbolTwo,
      offset: '50%'
    },{
      icon: symbolThree,
      offset: '100%'
    }
  ],
  map: map
});
Demo

Symbole animieren

Symbole können entlang des Pfads animiert werden. Hierfür verwenden Sie eine setTimeout()-Funktion, um den Versatz eines Symbols in festen Intervallen zu ändern.

JavaScript
var line;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(20.291, 153.027),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
      
  var lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
  ];

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  line = new google.maps.Polyline({
    path: lineCoordinates,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });
}

function animateCircle() {
    var count = 0;
    offsetId = window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
Demo

Polygone

Polygon-Objekte sind Polyline-Objekten ähnlich. Sie bestehen aus einer Folge von Koordinaten in geordneter Reihenfolge. Polygone weisen jedoch kein offenes Ende auf, sondern definieren Bereiche innerhalb einer geschlossenen Schleife. Ähnlich wie Polylinien ermöglichen Sie Ihnen, einen Strich zu definieren, der sich auf den Umriss des Polygons auswirkt. Anders als Polylinien ermöglichen Polygone Ihnen außerdem, einen Füllbereich innerhalb des Polygons zu definieren.

Zusätzlich können Polygone potenziell komplexe Formen darstellen, einschließlich Unterbrechungen (mehrere Polygone als eines definiert), "Donuts" (bei denen Polygonbereiche innerhalb des Polygons als "Inseln" erscheinen) und Berührungs- bzw. Schnittpunkte von einem oder mehr Polygonen. Aus diesem Grund kann ein einzelnes Polygon mehrere Pfade angeben.

Polygonoptionen

Wie bei Polylinien können Sie benutzerdefinierte Farben, Stärken und Deckkraftwerte für den Rand des Polygons (die "Linie") und benutzerdefinierte Farben und Deckkraftwerte für den Füllbereich innerhalb des geschlossenen Bereichs definieren. Farben müssen im hexadezimalen HTML-Stil angegeben werden.

Da ein Polygonbereich mehrere separate Pfade enthalten kann, gibt die Eigenschaft Polygon des Objekts paths ein "Array von Arrays" an (jedes mit dem Typ MVCArray), wobei jedes Array eine separate Folge geordneter LatLng-Koordinaten definiert.

Für einfache Polygone, die nur aus einem Pfad bestehen, können Sie jedoch ein Polygon aufbauen, indem Sie lediglich ein einzelnes Array mit LatLng-Koordinaten verwenden. Das Google Maps API konvertiert dieses einfache Array beim Aufbau in ein "Array von Arrays", wenn es innerhalb der Eigenschaft paths des Polygons gespeichert wird. Das API stellt darüber hinaus einfache getPath()-Methoden für einfache Polygone bereit, die nur aus einem Pfad bestehen.

Hinweis: Wenn Sie ein Polygon auf diese Weise aufbauen, müssen Werte aus dem Polygon trotzdem abgerufen werden, indem Sie den Pfad als MVCArray bearbeiten.

Zusätzlich definiert die Eigenschaft editable eines Polygons, ob diese Form auf der Karte von Nutzern bearbeitbar ist.

Mit dem folgenden Code-Snippet wird ein Polygon erstellt, das das Bermudadreieck darstellt:


function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var mapOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];

  // Construct the polygon
  // Note that we don't specify an array or arrays, but instead just
  // a simple array of LatLngs in the paths property
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
}

Beispiel ansehen (polygon-simple.html)

Automatisches Vervollständigen für Polygone

Das Polygon im obigen Beispiel besteht aus vier Koordinaten. Beachten Sie dabei, dass die erste und letzte Koordinate denselben Punkt angeben, der die Schleifen definiert. In der Praxis muss diese letzte Koordinate allerdings nicht definiert werden, da Polygone geschlossene Bereiche definieren. Das Google Maps API "schließt" Polygone automatisch, indem eine Linie gezeichnet wird, die die letzte Koordinate mit der ersten Koordinate für beliebige Pfade verbindet.

Das folgende Beispiel ist mit dem ersten identisch, mit der Ausnahme, dass die letzte Koordinate weggelassen wird.

Beispiel ansehen (polygon-autoclose.html)

Polygon-Arrays

Ein Polygon gibt eine Folge von Koordinaten als Array von Arrays an, von denen jedes den Typ MVCArray hat. Jedes untergeordnete Array ist ein Array mit LatLng-Koordinaten, die einen einzelnen Pfad angeben. Rufen Sie zum Abrufen dieser Koordinaten die Methode getPaths() des Polygons auf. Da das Array den Typ MVCArray hat, muss es mit den folgenden Operationen bearbeitet und untersucht werden:

  • getAt() gibt LatLng bei einem bestimmten nullbasierten Indexwert zurück.
  • insertAt() fügt eine übergebene LatLng-Angabe an einem bestimmten nullbasierten Indexwert ein. Beachten Sie, dass alle vorhandenen Koordinaten an diesem Indexwert vorwärts verschoben werden.
  • removeAt() entfernt eine LatLng-Angabe an einen bestimmten nullbasierten Indexwert.

Hinweis: Es kann nicht einfach das i-Element eines Arrays unter Verwendung der Syntax mvcArray[i] abgerufen werden. Es muss mvcArray.getAt(i) verwendet werden.

Der folgende Code verarbeitet Klickereignisse auf dem Polygon, indem Informationen zu den Koordinaten des Polygons angezeigt werden:


var map;
var infoWindow;

function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var mapOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ];

  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
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

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

function showArrays(event) {

  // Since this Polygon only has one path, we can call getPath()
  // to return the MVCArray of LatLngs
  var vertices = this.getPath();

  var contentString = "<b>Bermuda Triangle Polygon</b><br />";
  contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

  // Iterate over the vertices.
  for (var i =0; i < vertices.length; i++) {
    var xy = vertices.getAt(i);
    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
  }

  // Replace our Info Window's content and position
  infowindow.setContent(contentString);
  infowindow.setPosition(event.latLng);

  infowindow.open(map);
}

Beispiel ansehen (polygon-arrays.html)

Kreise und Rechtecke

Zusätzlich zu einer generischen Polygon-Klasse beinhaltet das Google Maps JavaScript API auch spezielle Klassen für Circle und Rectangle, um deren Aufbau zu vereinfachen.

Kreise

Ein Circle ist einem Polygon ähnlich. Sie können benutzerdefinierte Farben, Stärken und Deckkraftwerte für den Rand des Kreises (die "Linie") und benutzerdefinierte Farben und Deckkraftwerte für den Füllbereich innerhalb des geschlossenen Bereichs definieren. Farben müssen im hexadezimalen HTML-Stil angegeben werden.

Anders als bei einem Polygon wird paths für einen Circle nicht definiert. Stattdessen hat ein Kreis zwei zusätzliche Eigenschaften, die seine Form definieren:

  • center gibt die google.maps.LatLng-Koordinaten des Kreismittelpunkts an.
  • radius gibt den Radius des Kreises in Metern an.

Zusätzlich definiert die Eigenschaft editable eines Kreises, ob diese Form auf der Karte von Nutzern bearbeitbar ist.

Mit dem folgenden Code-Snippet wird ein Kreis erstellt, der die Bevölkerung der USA darstellt:


// Create an object containing LatLng, population.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
}
var cityCircle;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  for (var city in citymap) {
    // Construct the circle for each value in citymap. We scale population by 20.
    var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 20
    };
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

Beispiel ansehen (circle-simple.html)

Rechtecke

Ein Rectangle ist einem Polygon ähnlich. Sie können benutzerdefinierte Farben, Stärken und Deckkraftwerte für den Rand des Rechtecks (die "Linie") und benutzerdefinierte Farben und Deckkraftwerte für den Füllbereich innerhalb des geschlossenen Bereichs definieren"). Farben müssen im hexadezimalen HTML-Stil angegeben werden.

Anders als bei einem Polygon wird paths für ein Rectangle nicht definiert. Stattdessen hat ein Rechteck die Eigenschaft bounds, die seine Form definiert:

  • bounds gibt die google.maps.LatLngBounds dieses Rechtecks an.

Zusätzlich definiert die Eigenschaft editable eines Rechtecks, ob diese Form auf der Karte von Nutzern bearbeitbar ist.

Im folgenden Beispiel wird ein Rechteck auf Basis des vorherigen Darstellungsbereichs bei einem beliebigen 'zoom_changed'-Ereignis erstellt:


function initialize() {

  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;

  var mapOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  rectangle = new google.maps.Rectangle();

  google.maps.event.addListener(map, 'zoom_changed', function() {

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

Beispiel ansehen (rectangle-simple.html)

Von Nutzern bearbeitbare Formen

Alle Form-Overlays, also Polylinien, Polygone, Kreise und Rechtecke, können als von Nutzern bearbeitbar festgelegt werden, indem editable in den Formoptionen auf true gesetzt wird.

Möchten Sie Markierungen als verschiebbar festlegen, setzen Sie draggable in den Markierungsoptionen auf true.

var circleOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  radius: 25000,
  map: map,
  editable: true
};
var circle = new google.maps.Circle(circleOptions);

Wird ein Form-Overlay bearbeitbar gemacht, werden zur Form Steuerelemente hinzugefügt, um Nutzern zu ermöglichen, seine Position, Form und/oder Größe direkt auf der Karte zu ändern.

Beispiel ansehen (user-editable-shapes.html)

Von Nutzern vorgenommene Änderungen am Objekt werden zwischen Sitzungen nicht beibehalten. Wenn Sie Polygonbearbeitungen speichern möchten, müssen die Informationen selbst erfasst und gespeichert werden.

Bearbeitungsereignisse

Wenn eine Form bearbeitet wird, wird nach Beendigung der Bearbeitung ein Ereignis ausgelöst. Diese Ereignisse werden nachfolgend aufgelistet.

Form Ereignisse
Kreis radius_changed
center_changed
Polygon insert_at
remove_at
set_at

Der Listener muss auf den Pfad des Polygons festgelegt werden. Hat das Polygon mehrere Pfade, muss der Listener auf jeden Pfad festgelegt werden.

Polyline insert_at
remove_at
set_at

Der Listener muss auf den Pfad der Polylinie festgelegt werden.

Rechteck bounds_changed
google.maps.event.addListener(circle, 'radius_changed', function() {
  radius = circle.getRadius();
});

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

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

Zeichnungsbibliothek

Die Angaben in diesem Dokument beziehen sich auf Funktionen, die nur innerhalb der Bibliothek google.maps.drawing verfügbar sind. Diese Bibliothek wird nicht standardmäßig geladen, wenn Sie das Google Maps JavaScript API laden. Sie muss ausdrücklich durch einen libraries-Bootstrap-Parameter angegeben werden.

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing

Weitere Informationen finden Sie unter Bibliotheken im Google Maps API Version 3.

Die Klasse DrawingManager bietet Nutzern eine grafische Benutzeroberfläche zum Zeichnen von Polygonen, Rechtecken, Polylinien, Kreisen und Markierungen auf der Karte. Ein DrawingManager-Objekt wird wie folgt erstellt:

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

DrawingManager-Optionen

Der DrawingManager-Konstruktor akzeptiert einen Satz von Optionen, die den anzuzeigenden Satz von Steuerelementen, die Position der Steuerelemente und den anfänglichen Zeichnungsstatus definieren.

  • Die Eigenschaft drawingMode von DrawingManager definiert den anfänglichen Zeichnungsstatus von DrawingManager. Sie akzeptiert eine google.maps.drawing.OverlayType-Konstante. Die Standardeinstellung ist null. In diesem Fall ist der Cursor nicht im Zeichenmodus, wenn DrawingManager initialisiert wird.
  • Die Eigenschaft drawingControl von DrawingManager definiert die Sichtbarkeit der Auswahloberfläche für Zeichentools auf der Karte. Sie akzeptiert einen booleschen Wert.
  • Mithilfe der Eigenschaft drawingControlOptions von DrawingManager können Sie auch die Position der Steuerelemente sowie die Overlay-Typen definieren, die in den Steuerelementen dargestellt werden sollen.
    • position definiert die Position des Zeichensteuerelements auf der Karte und akzeptiert eine google.maps.ControlPosition-Konstante.
    • drawingModes ist ein Array mit google.maps.drawing.OverlayType-Konstanten und definiert die Overlay-Typen, die in die Formauswahl des Zeichensteuerelements eingefügt werden sollen. Das Handsymbol ist immer vorhanden. Es ermöglicht dem Nutzer, mit der Karte zu interagieren, ohne zu zeichnen.
  • Jedem Typ von Overlay kann ein Satz von Standardeigenschaften zugewiesen werden, die das Erscheinungsbild des Overlays definieren, wenn es erstellt wird. Diese sind in der Eigenschaft {overlay}Options dieses Overlays definiert, wobei {overlay} den Overlay-Typ darstellt. Fülleigenschaften, Stricheigenschaften, zIndex und Anklickbarkeit eines Kreises können zum Beispiel mit der Eigenschaft circleOptions definiert werden. Wenn Größen-, Standort- oder Kartenwerte übergeben werden, werden sie ignoriert. Umfassende Informationen zu den Eigenschaften, die festgelegt werden können, finden Sie in der API-Referenzdokumentation.

    Tipp: Wenn Sie eine Form nach dem Erstellen durch Nutzer bearbeitbar machen möchten, setzen Sie ihre Eigenschaft editable auf true.

var 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]
  },
  markerOptions: {
    icon: new google.maps.MarkerImage('http://www.example.com/icon.png')
  },
  circleOptions: {
    fillColor: '#ffff00',
    fillOpacity: 1,
    strokeWeight: 5,
    clickable: false,
    zIndex: 1,
    editable: true
  }
});
drawingManager.setMap(map);

Beispiel ansehen (drawing-tools.html)

Zeichentools-Steuerelement 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: [google.maps.drawing.OverlayType.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);

Durch Ausblenden des Zeichensteuerelements wird das Zeichentools-Steuerelement nicht angezeigt, die gesamte Funktionalität der Klasse DrawingManager ist jedoch weiterhin verfügbar. Auf diese Weise können Sie auf Wunsch ein eigenes Steuerelement implementieren. Durch Entfernen von DrawingManager aus dem map-Objekt wird die gesamte Zeichenfunktionalität deaktiviert. Es muss der Karte mit drawingManager.setMap(map) erneut zugeordnet oder ein neues DrawingManager-Objekt aufgebaut werden, wenn die Zeichenfunktionen wiederhergestellt werden sollen.

Zeichenereignisse

Wenn ein Form-Overlay erstellt wird, werden zwei Ereignisse ausgelöst:

  • Ein {overlay}complete-Ereignis, wobei {overlay} den Overlay-Typ wie circlecomplete oder polygoncomplete darstellt. Ein Verweis auf das Overlay wird als Argument übergeben.
  • Ein overlaycomplete-Ereignis. Ein Objektliteral, das den OverlayType und 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 == google.maps.drawing.OverlayType.CIRCLE) {
    var radius = event.overlay.getRadius();
  }
});

Infofenster

InfoWindow-Elemente zeigen Inhalte in einem schwebenden Fenster über der Karte an. Das Infofenster hat in etwa die Form einer Sprechblase. Es besteht aus einem Inhaltsbereich und einer Spitze, die auf einen bestimmten Punkt auf der Karte zeigt. Sie können ein Infofenster in Aktion sehen, wenn Sie in Google Maps auf eine Business-Markierung klicken.

Vom InfoWindow-Konstruktor wird ein InfoWindow options -Objekt verwendet, das einen Satz anfänglicher Parameter für die Anzeige im Infofenster festlegt. Ein Infofenster wird bei der Erstellung nicht zur Karte hinzugefügt. Möchten Sie das Infofenster sichtbar machen, müssen Sie die Methode open() im InfoWindow aufrufen, die Map eingeben, auf der es sich öffnen soll und, optional, die Marker, bei der es verankert sein soll. Wenn keine Markierung angegeben wird, öffnet sich das Infofenster am Wert seiner Eigenschaft position.

Das Objekt InfoWindow options ist ein Objektliteral, das die folgenden Felder enthält:

  • content enthält entweder Text oder einen DOM-Knoten, die im Infofenster angezeigt werden, wenn dieses sich öffnet.
  • pixelOffset enthält einen Versatz von der Spitze des Infofensters bis zu dem Standort, an dem das Infofenster verankert ist. In der Praxis muss dieses Feld wahrscheinlich nicht geändert werden.
  • position enthält die LatLng, wo dieses Infofenster verankert ist. Beachten Sie, dass beim Öffnen eines Infofensters bei einer Markierung dieser Wert automatisch mit einer neuen Position aktualisiert wird.
  • Mit maxWidth wird die maximale Breite des Infofensters in Pixeln festgelegt. Standardmäßig wird die Größe eines Infofensters automatisch an seinen Inhalt angepasst und der Text automatisch umgebrochen, wenn sich das Infofenster erweitert, um die Karte auszufüllen. Wenn Sie eine maxWidth implementieren, wird das Fenster automatisch umgebrochen, so dass die Pixelbreite erzwungen wird. Wenn es die maximale Breite erreicht, kann sich das Fenster immer noch vertikal erweitern, sofern auf dem Bildschirm Platz verfügbar ist.

Der Inhalt des InfoWindow-Elements kann entweder aus Text, einem HML-Snippet oder einem DOM-Element selbst bestehen. Zur Festlegung dieses Inhalts geben Sie ihn entweder in den InfoWindow options-Konstruktor ein oder rufen Sie setContent() im Infofenster auf. Wenn Sie die Größe des Inhalts ausdrücklich bestimmen möchten, können Sie hierfür <div> verwenden und, wenn Sie möchten, Scrollen aktivieren. Beachten Sie, dass der Inhalt, wenn er den verfügbaren Platz überschreitet und Sie Scrollen nicht aktiviert haben, möglicherweise über das Infofenster hinausreicht.

InfoWindow können entweder an Marker-Objekte (in diesem Fall basiert ihre Position auf der Position der Markierung) oder bei einer bestimmten LatLng an die Karte selbst angefügt werden. Wenn Sie möchten, dass jeweils nur ein Infofenster angezeigt wird, was dem Verhalten bei Google Maps entspricht, muss nur ein Infofenster erstellt werden, das Sie bei Kartenereignissen, z. B. Benutzerklicks, verschiedenen Standorten oder Markierungen immer neu zuordnen können. Anders als bei Version 2 des Google Maps APIs können nun jedoch mehrere InfoWindow-Objekte auf einer Karte angezeigt werden, wenn Sie das möchten.

Wenn Sie die Position des Infofensters ändern möchten, können Sie entweder ausdrücklich die Position durch Aufrufen von setPosition() im Infofenster verändern, oder Sie können es unter Verwendung der Methode InfoWindow.open() an eine neue Markierung anfügen. Beachten Sie, dass beim Aufrufen von open() ohne Angabe einer Markierung vom InfoWindow diejenige Position verwendet wird, die beim Aufbau mithilfe des Objekts InfoWindow options angegeben wurde.

Mit dem folgenden Code wird eine Markierung im Zentrum Australiens angezeigt. Durch Klicken auf diese Markierung wird das Infofenster angezeigt.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Beispiel ansehen (infowindow-simple.html)

Ein Beispiel, bei dem für maxWidth des Infofensters 200 Pixel festgelegt sind, erscheint unten:

Beispiel ansehen (infowindow-simple-max.html)

Boden-Overlays

Polygone sind nützliche Overlays zur Darstellung von Bereichen mit frei wählbarer Größe, es können darin aber keine Bilder angezeigt werden. Wenn Sie ein Bild auf einer Karte platzieren möchten, können Sie ein GroundOverlay-Objekt verwenden. Der Konstruktor eines GroundOverlay-Objekts gibt die URL und LatLngBounds für ein Bild als Parameter an. Das Bild wird auf der Karte gerendert, auf die angegebenen Begrenzungen beschränkt und mithilfe der Projektion der Karte angepasst.

Im folgenden Beispiel wird eine antike Karte von Newark, NJ (USA), als Overlay auf der Karte platziert:

var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216,-74.213393),
    new google.maps.LatLng(40.765641,-74.139235));

var mapOptions = {
  zoom: 13,
  center: newark,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var oldmap = new google.maps.GroundOverlay(
    "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
    imageBounds);
oldmap.setMap(map);

Beispiel ansehen (groundoverlay-simple.html)

Benutzerdefinierte Overlays

Das Google Maps API Version 3 bietet eine OverlayView-Klasse, mit der Sie eigene benutzerdefinierte Overlays erstellen können. Die OverlayView ist eine Basisklasse und bietet eine Reihe von Methoden, die beim Erstellen Ihrer Overlays implementiert werden müssen. Die Klasse bietet außerdem einige Methoden, die es ermöglichen, zwischen Bildschirmkoordinaten und Positionen auf der Karte zu wechseln.

So erstellen Sie ein benutzerdefiniertes Overlay:

  • Legen Sie den prototypedes benutzerdefinierten Objekts auf eine neue Instanz von google.maps.OverlayView() fest. Dadurch wird praktisch eine Unterklasse der Overlay-Klasse abgeleitet.
  • Erstellen Sie für das benutzerdefinierte Overlay einen Konstruktor und legen Sie innerhalb dieses Konstruktors alle Initialisierungsparameter auf benutzerdefinierte Eigenschaften fest.
  • Implementieren Sie eine onAdd()-Methode innerhalb des Prototyps und verknüpfen Sie das Overlay mit der Karte. OverlayView.onAdd() wird aufgerufen, wenn die Karte zur Verknüpfung mit dem Overlay bereit ist.
  • Implementieren Sie eine draw()-Methode innerhalb des Prototyps und bearbeiten Sie die visuelle Anzeige des Objekts. OverlayView.draw() wird auch dann aufgerufen, wenn das Objekt zum ersten Mal angezeigt wird.
  • Sie müssen außerdem eine onRemove()-Methode implementieren, damit Sie gegebenenfalls Elemente entfernen können, die Sie innerhalb des Overlays hinzugefügt haben.

Dies wird im Folgenden Schritt für Schritt erklärt.

Unterklasse von einem Overlay ableiten

OverlayView wird verwendet, um ein einfaches Bild-Overlay zu erstellen (ähnlich dem GGroundOverlay im Version 2-API). Es wird ein USGSOverlay-Objekt erstellt, das ein USGS-Bild von der entsprechenden Region sowie die Grenzen des Bildes enthält.

var overlay;

function initialize() {
  var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
  var mapOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  var swBound = new google.maps.LatLng(62.281819, -150.287132);
  var neBound = new google.maps.LatLng(62.400471, -150.005608);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // Photograph courtesy of the U.S. Geological Survey
  var srcImage = 'images/talkeetna.png';
  overlay = new USGSOverlay(bounds, srcImage, map);
}

Als Nächstes wird ein Konstruktor für diese Klasse erstellt, und die eingegebenen Parameter werden als Eigenschaften des neuen Objekts initialisiert. Außerdem muss explizit eine Unterklasse des USGSOverlay unter OverlayView abgeleitet werden. Dazu wird der prototype der neuen Klasse auf eine Instanz der übergeordneten Klasse festgelegt. Hierbei wird der Prototyp auf eine Instanz festgelegt und nicht auf die übergeordnete Klasse selbst, da die übergeordnete Klasse nicht modifiziert werden soll.

function USGSOverlay(bounds, image, map) {

  // Now initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // We define a property to hold the image's
  // div. We'll actually create this div
  // upon receipt of the add() method so we'll
  // leave it null for now.
  this.div_ = null;

  // Explicitly call setMap() on this overlay
  this.setMap(map);
}

USGSOverlay.prototype = new google.maps.OverlayView();

Dieses Overlay kann noch nicht mit der Karte im Konstruktor des Overlays verknüpft werden. Insbesondere muss zuvor sichergestellt sein, dass alle Fenster der Karte verfügbar sind, die angeben, in welcher Reihenfolge Objekte auf der Karte angezeigt werden. Praktischerweise bietet das API eine Hilfsmethode, die anzeigt, wann dies der Fall ist. Diese Methode wird im nächsten Abschnitt erklärt.

Overlay initialisieren

Wenn das Overlay zum ersten Mal instanziiert wird und zur Anzeige bereit ist, muss es über das DOM des Browsers mit der Karte verknüpft werden. Das API gibt an, dass das Overlay zur Karte hinzugefügt wurde, indem es die Methode onAdd() des Overlays aufruft. Diese Methode wird bearbeitet, indem ein <div> erstellt wird, das das Bild enthält, ein <img>-Element hinzugefügt und dieses mit dem <div> verknüpft wird. Schließlich wird das Overlay mit einem der Fenster der Karte verknüpft, die Knoten innerhalb des DOM-Baumes darstellen.

Der Satz Fenster vom Typ MapPanes gibt die Stapelreihenfolge für die verschiedenen Ebenen auf der Karte an. Die folgenden Fenster stehen zur Verfügung. Sie sind entsprechend ihrer Stapelreihenfolge von unten nach oben nummeriert:

  • MapPanes.mapPane
  • MapPanes.overlayLayer
  • MapPanes.overlayShadow
  • MapPanes.overlayImage
  • MapPanes.floatShadow
  • MapPanes.overlayMouseTarget
  • MapPanes.floatPane

Da es sich bei dem Bild um ein "Boden-Overlay" handelt, wird das Fenster overlayLayer der Karte verwendet. Sobald dieses Fenster verfügbar ist, wird das Objekt als untergeordnetes Objekt damit verknüpft.

USGSOverlay.prototype.onAdd = function() {

  // Note: an overlay's receipt of onAdd() indicates that
  // the map's panes are now available for attaching
  // the overlay to the map via the DOM.

  // Create the DIV and set some basic attributes.
  var div = document.createElement('div');
  div.style.border = "none";
  div.style.borderWidth = "0px";
  div.style.position = "absolute";

  // Create an IMG element and attach it to the DIV.
  var img = document.createElement("img");
  img.src = this.image_;
  img.style.width = "100%";
  img.style.height = "100%";
  div.appendChild(img);

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  // We add an overlay to a map via one of the map's panes.
  // We'll add this overlay to the overlayImage pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}

Overlay zeichnen

Beachten Sie, dass bisher keine spezielle visuelle Anzeige aufgerufen wurde. Das API ruft eine separate draw()-Methode für das Overlay auf, wann immer das Overlay auf der Karte gezeichnet werden muss, auch wenn es zum ersten Mal hinzugefügt wird.

Diese draw()-Methode wird daher implementiert, die MapCanvasProjection des Overlays wird unter Verwendung von getProjection() abgerufen und die exakten Koordinaten zum Verankern der rechten oberen bzw. linke untere Ecke des Objekts, von wo aus die Größe des <div> angepasst werden soll, werden berechnet. Daraufhin wird die Größe des Bildes angepasst, sodass es mit den Begrenzungen übereinstimmt, die im Konstruktor des Overlays angegeben wurden.

USGSOverlay.prototype.draw = function() {

  // Size and position the overlay. We use a southwest and northeast
  // position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  var overlayProjection = this.getProjection();

  // Retrieve the southwest and northeast coordinates of this overlay
  // in latlngs and convert them to pixels coordinates.
  // We'll use these coordinates to resize the DIV.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's DIV to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}

Overlay entfernen

Eine onRemove()-Methode, mit der das Overlay sauber aus der Karte entfernt werden kann, wird ebenfalls hinzugefügt. Diese Methode wird vom API automatisch aufgerufen, sobald die Eigenschaft map des Overlays auf null festgelegt wird.

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

Beispiel ansehen (overlay-simple.html)

Overlay aus- und einblenden

Wenn Sie ein Overlay aus- und einblenden möchten, anstatt es zu erstellen und zu entfernen, können Sie eigene Methoden zum hide()und show() implementieren, um die Sichtbarkeit des Overlays anzupassen. Wahlweise können Sie die Verknüpfung des Overlays mit der DOM der Karte aufheben. Dieser Vorgang ist jedoch etwas aufwändiger. Beachten Sie, dass beim erneuten Verknüpfen des Overlays mit dem DOM der Karte die Methode onAdd() des Overlays aufgerufen wird.

Im folgenden Beispiel werden hide()- und show()-Methoden zum Prototyp des Overlays hinzugefügt, mit denen die Sichtbarkeit des Container-<div> ein- und ausgeschaltet werden kann. Außerdem fügen wir eine toogleDOM()-Methode hinzu, die die Verknüpfung des Overlays mit der Karte herstellt oder aufhebt. Beachten Sie: Wird die Sichtbarkeit auf "hidden" gesetzt und dann die Verknüpfung der Karte mit dem DOM über toggleDOM() aufgehoben, ist die Karte nach dem erneuten Verknüpfen wieder sichtbar, da das <div>, in dem sie enthalten ist, mit der Methode onAdd() des Overlays wiederhergestellt wird.

// Note that the visibility property must be a string enclosed in quotes
USGSOverlay.prototype.hide = function() {
  if (this.div_) {
    this.div_.style.visibility = "hidden";
  }
}

USGSOverlay.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = "visible";
  }
}

USGSOverlay.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility == "hidden") {
      this.show();
    } else {
      this.hide();
    }
  }
}

USGSOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
    this.setMap(null);
  } else {
    this.setMap(this.map_);
  }
}
// Now we add an input button to initiate the toggle method
// on the specific overlay
<div id ="toolbar" width="100%; height:20px;" style="text-align:center">
  <input type="button" value="Toggle Visibility" onclick="overlay.toggle();"></input>
  <input type="button" value="Toggle DOM Attachment" onclick="overlay.toggleDOM();"></input>
</div>
<div id="map_canvas" style="width: 100%; height: 95%;"></div>

Beispiel ansehen (overlay-hideshow.html)

Authentifizierung erforderlich

Dazu müssen Sie in Google+ angemeldet sein.

Anmeldung...

Google Developers braucht hierfür Ihre Erlaubnis.