<geolocation>: Das Geolocation-Element

Attribute

Dieses Element enthält die globalen Attribute.

autolocate Experimentell

Ein boolesches Attribut, das, wenn es auf true gesetzt ist, angibt, dass der Browser die Standortdaten sofort abrufen soll, wenn das <geolocation>-Element gerendert wird, vorausgesetzt, die Berechtigung wurde vorher erteilt. Wenn auf false gesetzt, werden Standortdaten erst abgerufen, wenn der Benutzer die Steuerung aktiviert. Standardmäßig auf false.

Wenn die Berechtigung nicht vorher erteilt wurde, hat dieses Attribut keine Wirkung.

watch Experimentell

Ein boolesches Attribut, das, wenn es auf true gesetzt ist, angibt, dass der Browser Standortdaten abrufen soll, wann immer sich die Position des Geräts des Benutzers ändert. Wenn auf false gesetzt, werden Standortdaten nur einmal abgerufen. Standardmäßig auf false.

Beschreibung

Das <geolocation>-Element bietet eine deklarative, vom Browser definierte Steuerung zum Teilen von Standortdaten. In Chrome verfügt der Button beispielsweise über ein "Kartennadel"-Symbol und intuitiven Text ("Use location" in englischen Inhalten).

Es ermöglicht auch eine intuitive Verwaltung von Benutzerberechtigungen. Wenn beispielsweise der Benutzer in Chrome zuvor verweigert hat, die Standortdaten zuzulassen, oder den Berechtigungsdialog ohne Entscheidung geschlossen hat, kann er den Button erneut drücken, um seine Wahl zu aktualisieren. In Fällen, in denen die Berechtigung zuvor verweigert wurde, informieren nachfolgende Dialoge den Benutzer darüber, dass er zuvor das Teilen der Standortdaten nicht erlaubt hat, und fragen ihn, ob er dies weiterhin nicht erlauben oder es doch erlauben möchte.

Ein Schlüsselelement des <geolocation>-Elements ist, dass es die bewusste Entscheidung des Benutzers widerspiegelt und eine eventuelle Nutzung blockiert, die den Benutzer dazu verleiten könnte, seine Standortdaten ungewollt bereitzustellen (siehe <geolocation> blocking für weitere Informationen).

Die DOM API-Schnittstelle des Elements, HTMLGeolocationElement, bietet Funktionen zum Zugriff auf zurückgegebene Positionsdaten, aktuellen Berechtigungsstatus und Fehler, falls das Abrufen der Daten nicht erfolgreich war. Dadurch wird die Menge des zu schreibenden JavaScript-Codes reduziert. Es sind auch Ereignisse verfügbar, um Code als Reaktion auf empfangene Standortdaten, Änderungen im Berechtigungsstatus und Benutzerinteraktionen mit dem Berechtigungsdialog auszuführen.

Beziehung zur Geolocation API

Die Geolocation API bietet eine ältere Alternative zur Handhabung von Standortdaten. Diese API hat einige Mängel, die das <gelocation>-Element zu beheben versucht, insbesondere dass die Benutzeroberfläche und die zugrunde liegende Logik zur Anforderung der Daten jedes Mal von Grund auf neu implementiert werden müssen und die Handhabung der Berechtigungen unintuitiv sein kann.

Das <geolocation>-Element verwendet im Hintergrund Funktionen der Geolocation API. Standardmäßig fordert der Browser Standortdaten einmal an, als ob die Methode Geolocation.getCurrentPosition() aufgerufen wurde. Wenn jedoch das watch-Attribut auf true gesetzt ist, aktualisiert der Browser die Daten jedes Mal, wenn sich die Position des Geräts ändert, als ob Geolocation.watchPosition() aufgerufen wurde.

Wenn Daten erfolgreich abgerufen werden, sind sie in der HTMLGeolocationElement.position Eigenschaft verfügbar, die ein GeolocationPosition Objekt enthält. Wenn das Abrufen von Daten nicht erfolgreich ist, sind Fehlerinformationen in der HTMLGeolocationElement.error Eigenschaft verfügbar, die ein GeolocationPositionError Objekt enthält.

Sprache des Buttons einstellen

Das globale lang-Attribut wird vom <geolocation>-Element verwendet, um eine Sprache für den gerenderten Text auszuwählen. Das bedeutet, dass Sie ein lang-Attribut direkt auf dem <geolocation>-Element oder auf einem seiner Vorfahren setzen können, um dem Browser mitzuteilen, welche Sprache für die Buttonbeschriftung verwendet werden soll.

Wenn kein geeignetes lang-Attribut gesetzt ist, wird die bevorzugte Spracheinstellung des Browsers verwendet.

Fallback-Inhalt einfügen

Sie können Fallback-Inhalt zwischen den Öffnungs- und Schlusstags des <geolocation>-Elements einschließen, der angezeigt wird, wenn es nicht unterstützt wird. Zum Beispiel könnten Sie eine "Nicht unterstützt" Nachricht einfügen:

<geolocation>
  <p>Your browser doesn't support the Geolocation element.</p>
</geolocation>

Eine bessere realitätsnahe Lösung könnte jedoch darin bestehen, ein reguläres <button>-Element einzuschließen, das die Geolocation API verwendet, um Standortdaten abzurufen:

<geolocation>
  <button id="fallback">Use location</button>
</geolocation>

<geolocation>-Blocking

Eine Schlüsselidee hinter der Gestaltung des <geolocation>-Elements ist, dass es eine bewusste Entscheidung des Nutzers sein sollte, Positionsinformationen offenzulegen, und dass verhindert werden sollte, dass böswillige Akteure Nutzer dazu verleiten, es zu aktivieren, z.B. durch Clickjacking. Aus diesem Grund führt der Browser für jedes gerenderte Element Aufzeichnungen über sogenannte Blocker-Gründe.

Wenn ein Blocker auf einem <geolocation>-Element aktiv ist, wird dessen Funktion (zeitweise oder dauerhaft, je nach Grund) verhindert. Wenn ein <geolocation>-Element blockiert ist, gilt es als ungültig. Sie können überprüfen, ob es ungültig ist, indem Sie die HTMLGeolocationElement.isValid Eigenschaft abfragen. Außerdem können Sie den Grund, warum es ungültig ist, über die HTMLGeolocationElement.invalidReason Eigenschaft ermitteln — siehe diese Seite für eine vollständige Liste möglicher Gründe.

Styling-Einschränkungen

Das <geolocation>-Element unterliegt mehreren Einschränkungen bezüglich der CSS-Stile, die darauf angewendet werden können. Einige dieser Einschränkungen sollen grundlegende Zugänglichkeit erzwingen und führen dazu, dass der Button deaktiviert wird, wenn sie nicht eingehalten werden. Andere setzen bestimmte Werte oder Wertebereiche für verschiedene Eigenschaften durch.

Jegliche Eigenschaften, die nicht in den folgenden Unterabschnitten aufgelistet oder logisch äquivalent zu einer in den folgenden Unterabschnitten aufgeführten physischen Eigenschaft sind, werden ignoriert, wenn sie auf das <geolocation>-Element gesetzt werden.

Zugänglichkeitsbeschränkungen

Der gerenderte <geolocation>-Button wird deaktiviert (was bedeutet, dass das Drücken keinen Effekt hat), wenn die folgenden Einschränkungen nicht eingehalten werden:

• Das Farbkontrast-Verhältnis zwischen color und background-color muss mindestens 3:1 betragen.
• Die font-size darf nicht kleiner als der small-Wert (bei Schlüsselwortwerten) oder sein berechneter Wert (bei anderen Werttypen) sein.

Wertbeschränkungen

Die folgenden CSS-Eigenschaftenwertbeschränkungen werden auf das <geolocation>-Element angewendet. Wenn versucht wird, diese Eigenschaften auf Werte außerhalb der aufgelisteten Beschränkungen auf dem <geolocation>-Element zu setzen, wird der Wert so angepasst, dass er der Beschränkung (im Falle einer genauen Wertbeschränkung) oder dem nächstgelegenen berechneten Wert oberhalb oder unterhalb entspricht (im Falle einer Bereichsbeschränkung).

opacity

1.0

line-height

normal

white-space

nowrap

user-select

none

appearance

auto

box-sizing

content-box

vertical-align

middle

text-emphasis

initial

text-shadow

initial

outline-offset

0 oder größer.

font-weight

200 oder größer.

word-spacing

Zwischen 0 und 0.5em, inklusive.

letter-spacing

Zwischen -0.05em und 0.2em, inklusive.

min-height

1em oder größer.

max-height

3em oder weniger. none ist ein akzeptierter Wert.

min-width

Der berechnete Wert von fit-content oder kleiner.

border-width

1em oder weniger.

Komplexe Einschränkungen

Die folgenden Einschränkungen sind komplexer als einfache Wertbeschränkungen:

Blockrichtung-Polsterung

Wenn die block-size auf auto gesetzt ist, sind die padding-block-start und padding-block-end (und gleichwertige physische Eigenschaften für den aktuellen Schreibmodus) auf maximal 1em beschränkt und müssen gleich sein.

Inline-Richtung-Polsterung

Wenn die inline-size auf auto gesetzt ist, sind die padding-inline-start und padding-inline-end (und gleichwertige physische Eigenschaften für den aktuellen Schreibmodus) auf maximal 5em beschränkt und müssen gleich sein.

Eigenschaften, die normal gesetzt werden können

Die folgenden CSS-Eigenschaften können normal verwendet werden:

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name
• aspect-ratio
• border, border-top, border-right, border-bottom, und border-left
• clear
• color-scheme
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-reset, counter-increment, und counter-set
• flex, flex-grow, flex-shrink, und flex-basis
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline, outline-color, und outline-style
• overflow-anchor
• overscroll-behavior, overscroll-behavior-inline, overscroll-behavior-block, overscroll-behavior-x, und overscroll-behavior-y
• page
• position
• position-anchor
• right
• scroll-margin, scroll-margin-top, scroll-margin-right, scroll-margin-bottom, und scroll-margin-left
• scroll-padding, scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left, scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-block-start, scroll-padding-inline-end, und scroll-padding-block-end
• text-spacing-trim
• text-transform
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

Zugänglichkeit

Das <geolocation>-Element hat einen zugänglichen Namen, der in der eingestellten Sprache geschrieben ist. Es hat auch eine role von button, sodass es von Screenreadern als Button erkannt wird.

Darüber hinaus hat das <geolocation>-Element einen standardmäßigen tabindex-Wert von 0, sodass es sich wie ein echtes <button> bezüglich Tastaturfokus verhält.

Schließlich verweisen Sie auf den Abschnitt Zugänglichkeitsbeschränkungen für Informationen zu Styling-Einschränkungen, die auf das <geolocation>-Element angewendet werden, um grundlegende Zugänglichkeitsanforderungen durchzusetzen.

Beispiele

Grundlegendes Anwendungsbeispiel

Dieses Beispiel verwendet das <geolocation>-Element, um Ihren aktuellen Standort abzurufen, der unter dem Button in einem <p>-Element ausgegeben wird. Das Beispiel verwendet auch einen regulären <button>-Fallback, um die Standortdaten in nicht unterstützenden Browsern abzurufen.

HTML

Wir fügen ein <geolocation>-Element mit einem darin verschachtelten <button>-Fallback ein, das in Browsern gerendert wird, die <geolocation> nicht unterstützen. Wir fügen auch ein <p> hinzu, um Standortdaten und Fehlerausgaben auszugeben.

<geolocation>
  <button id="fallback">Use location</button>
</geolocation>
<p id="output"></p>

JavaScript

In unserem Skript holen wir uns zunächst eine Referenz auf das Ausgabeelement <p>. Dann überprüfen wir, ob das <geolocation>-Element unterstützt wird, indem wir typeof HTMLGeolocationElement === "function" testen:

• Wenn es unterstützt wird, holen wir zunächst eine Referenz auf das <geolocation>-Element und fügen dann einen location Ereignis-Listener hinzu. Wenn der Button gedrückt wird und die Daten abgerufen werden, druckt der Listener die (Lat, Long) Koordinaten in das Ausgabeelement <p> (abgerufen über die position Eigenschaft) oder eine Fehlermeldung, falls das Abrufen der Daten nicht erfolgreich war (abgerufen über die error Eigenschaft).
• Wenn es nicht unterstützt wird, holen wir eine Referenz auf das Fallback <button>-Element und rufen die gleichen Daten ab und drucken sie aus, jedoch diesmal mit einem click-Ereignis-Listener auf dem Button und einem Geolocation.getCurrentPosition()-Aufruf, um die Daten abzurufen.

const outputElem = document.querySelector("#output");

if (typeof HTMLGeolocationElement === "function") {
  const geo = document.querySelector("geolocation");
  geo.addEventListener("location", () => {
    if (geo.position) {
      outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;
    } else if (geo.error) {
      outputElem.textContent += `${geo.error.message}, `;
    }
  });
} else {
  const fallback = document.querySelector("#fallback");
  fallback.addEventListener("click", () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        outputElem.textContent += `(${position.coords.latitude}, ${position.coords.longitude}), `;
      },
      (error) => {
        outputElem.textContent += `${error.message}, `;
      },
    );
  });
}

Ergebnis

Sehen Sie sich diesen Code live in Aktion an (Quellcode). Sie können auch eine Version dieses Beispiels finden, die das watch-Attribut auf dem <geolocation>-Element enthält und daher Standortdaten jedes Mal abruft, wenn sich die Position des Geräts des Benutzers ändert (sehen Sie es live in Aktion, und den Quellcode).

Versuchen Sie, die Demos in einem unterstützten und einem nicht unterstützten Browser anzusehen, wenn möglich, und beachten Sie den Unterschied im Berechtigungsdialog, wenn Sie die Erlaubnis zur Verwendung von geolocation erteilen oder verweigern.

Für eine Schritt-für-Schritt-Anleitung zu einem umfassenderen Beispiel, das Standortdaten verwendet, um eine Karte Ihrer Umgebung zu erstellen, sehen Sie sich die HTMLGeolocationElement Referenzseite an.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLGeolocationElement
• Die geolocation Berechtigungsrichtlinie
• Geolocation API
• Berechtigungs-API
• Einführung in das <geolocation> HTML-Element auf developer.chrome.com (2026)