<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 Standortdaten sofort abrufen soll, wenn das <geolocation>-Element gerendert wird, vorausgesetzt, die Erlaubnis wurde zuvor erteilt. Wenn es auf false gesetzt ist, werden die Standortdaten erst abgerufen, wenn der Benutzer die Steuerung aktiviert. Standardmäßig auf false gesetzt.

Wenn die Erlaubnis zuvor nicht 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 es auf false gesetzt ist, werden die Standortdaten nur einmal abgerufen. Standardmäßig auf false gesetzt.

Beschreibung

Das <geolocation>-Element bietet ein deklaratives, vom Browser definiertes Steuerelement zum Teilen von Standortdaten. In Chrome zum Beispiel verfügt die Schaltfläche über ein Symbol in Form eines "Kartenpins" und intuitiven Text ("Use location" in englischsprachigem Inhalt).

Es ermöglicht auch eine intuitive Verwaltung der Benutzerberechtigungen. Zum Beispiel in Chrome, wenn der Benutzer zuvor die Erlaubnis zum Zugriff auf Standortdaten verweigert hat oder den Berechtigungsdialog ohne Auswahlmöglichkeit abgelehnt hat, kann er die Schaltfläche erneut drücken, um seine Auswahl zu aktualisieren. In Fällen, in denen sie die Erlaubnis zuvor verweigert haben, informieren nachfolgende Dialoge darüber, dass sie zuvor nicht zugestimmt haben, Standortdaten zu teilen, und fragen sie, ob sie weiterhin nicht zustimmen oder zustimmen möchten.

Ein wesentlicher Aspekt des <geolocation>-Elements ist, dass es die bewusste Wahl des Benutzers widerspiegelt und eine mögliche Nutzung blockiert, die den Benutzer dazu verleiten könnte, unwissentlich seine Standortdaten bereitzustellen (siehe <geolocation>-Blockierung für weitere Informationen).

Die DOM-API-Schnittstelle des Elements, HTMLGeolocationElement, bietet Features zum Zugriff auf zurückgegebene Positionsdaten, aktuellen Berechtigungsstatus und Fehler, wenn der Datenabruf nicht erfolgreich war, wodurch die Menge an JavaScript-Logik reduziert wird, die geschrieben werden muss. Außerdem stehen Ereignisse zur Verfügung, um Code auszuführen, als Reaktion auf empfangene Standortdaten, Änderungen des Berechtigungsstatus und Benutzerinteraktionen mit dem Berechtigungsdialog.

Beziehung zur Geolocation-API

Die Geolocation API bietet eine ältere Alternative für den Umgang mit Standortdaten. Diese API hat einige Mängel, die das <geolocation>-Element lösen soll, insbesondere, dass die Benutzeroberfläche und die zugrunde liegende Logik zum Anfordern der Daten jedes Mal von Grund auf neu implementiert werden müssen und die Verwaltung der Berechtigungen unintuitiv sein kann.

Das <geolocation>-Element verwendet Funktionen der Geolocation API im Hintergrund. 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 der Datenabruf nicht erfolgreich ist, sind Fehlermeldungen in der HTMLGeolocationElement.error-Eigenschaft verfügbar, die ein GeolocationPositionError-Objekt enthält.

Einstellung der Schaltflächensprache

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

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

Einfügen von Fallback-Inhalten

Sie können Fallback-Inhalte zwischen den öffnenden und schließenden Tags des <geolocation>-Elements einfügen, die angezeigt werden, wenn es nicht unterstützt wird. Zum Beispiel könnten Sie eine "Nicht unterstützt" Meldung einfügen:

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

Eine bessere Lösung aus der realen Welt könnte jedoch darin bestehen, ein reguläres <button>-Element einzufügen, das die Geolocation API verwendet, um Standortdaten abzurufen:

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

<geolocation>-Blockierung

Eine der wichtigsten Ideen hinter dem Design des <geolocation>-Elements ist, dass es die bewusste Wahl eines Benutzers widerspiegeln soll, Positionsinformationen offenzulegen, und verhindert, dass böswillige Akteure Benutzer dazu verleiten, es zu aktivieren, zum Beispiel durch Clickjacking. Aus diesem Grund führt der Browser für jedes gerenderte Element eine Aufzeichnung der sogenannten Blocker-Gründe.

Wenn ein Blocker auf ein <geolocation>-Element aktiv ist, wird es daran gehindert, zu funktionieren (blockiert), entweder vorübergehend oder dauerhaft, je nach Grund. Wenn ein <geolocation>-Element blockiert ist, sagt man, es sei ungültig. Sie können überprüfen, ob es ungültig ist, indem Sie die HTMLGeolocationElement.isValid-Eigenschaft abfragen. Sie können auch den Grund abrufen, warum es ungültig ist, über die HTMLGeolocationElement.invalidReason-Eigenschaft – sehen Sie sich diese Seite für eine vollständige Liste möglicher Gründe an.

Styling-Einschränkungen

Das <geolocation>-Element hat mehrere Einschränkungen bezüglich der CSS-Stile, die darauf angewendet werden können. Einige dieser Einschränkungen dienen der Durchsetzung grundlegender Barrierefreiheit und führen dazu, dass die Schaltfläche deaktiviert wird, wenn sie nicht eingehalten werden. Einige erzwingen bestimmte Werte oder Wertbereiche für verschiedene Eigenschaften.

Alle Eigenschaften, die in den folgenden Abschnitten nicht aufgeführt sind oder logisch einem physischen Attribut entsprechen, das in den folgenden Abschnitten aufgeführt ist, werden ignoriert, wenn sie auf das <geolocation>-Element gesetzt werden.

Zugriffsbeschränkungen

Die gerenderte <geolocation>-Schaltfläche wird deaktiviert (was bedeutet, dass das Drücken keine Wirkung hat), wenn die folgenden Einschränkungen nicht eingehalten werden:

• Das Kontrastverhältnis zwischen color und background-color muss mindestens 3:1 betragen.
• Die font-size darf nicht kleiner als der Wert small sein (im Falle von Schlüsselwortwerten) oder ihr berechneter Wert (im Falle anderer Werttypen).

Werteinschränkungen

Die folgenden CSS-Eigenschaftswerteinschränkungen werden auf das <geolocation>-Element angewendet. Wenn versucht wird, diese Eigenschaften auf Werte zu setzen, die außerhalb der aufgelisteten Einschränkungen auf das <geolocation>-Element fallen, wird der Wert so angepasst, dass er der Einschränkung entspricht (im Fall einer genauen Wertbeschränkung) oder auf den nächstgelegenen berechneten Wert oberer oder unterer Grenze abgestimmt wird (im Fall 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, einschließlich.

letter-spacing

Zwischen -0.05em und 0.2em, einschließlich.

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 weniger.

border-width

1em oder weniger.

Komplexe Einschränkungen

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

Blockrichtung-Padding

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

Inline-Richtung-Padding

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

Normal einstellbare Eigenschaften

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

Barrierefreiheit

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

Zusätzlich hat das <geolocation>-Element einen Standardwert für tabindex von 0, sodass es sich in Bezug auf die Tastaturfokussierung wie eine echte <button> verhält.

Zum Schluss verweisen Sie auf den Abschnitt Zugriffsbeschränkungen für Informationen zu den Stilbeschränkungen, die am <geolocation>-Element angewendet werden, um grundlegende Barrierefreiheitsanforderungen durchzusetzen.

Beispiele

Grundbeispiel

Dieses Beispiel verwendet das <geolocation>-Element, um Ihren aktuellen Standort abzurufen, der unterhalb der Schaltfläche in einem <p>-Element ausgegeben wird. Das Beispiel nutzt auch eine reguläre <button>-Fallback-Version, um die Standortdaten in nicht unterstützenden Browsern abzurufen.

HTML

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

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

JavaScript

In unserem Skript beginnen wir damit, eine Referenz zu dem Ausgabe-<p>-Element zu erhalten. Dann erkennen wir, ob das <geolocation>-Element unterstützt wird, indem wir typeof HTMLGeolocationElement === "function" testen:

• Wenn es unterstützt wird, greifen wir zuerst auf das <geolocation>-Element zu und fügen dann einen location Ereignis-Listener hinzu. Wenn die Schaltfläche gedrückt wird und die Daten abgerufen werden, druckt der Listener die (lat, long) Koordinaten in das Ausgabefeld <p> (abgerufen über die position-Eigenschaft) oder eine Fehlermeldung, falls der Datenabruf nicht erfolgreich war (abgerufen über die error-Eigenschaft).
• Wenn es nicht unterstützt wird, greifen wir auf das Fallback-<button>-Element zu und rufen die gleichen Daten ab, außer dass wir dieses Mal einen click-Ereignis-Listener an der Schaltfläche nutzen und über einen Aufruf von Geolocation.getCurrentPosition() die Daten abrufen.

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 an (Quellcode). Sie finden auch eine Version dieses Beispiels, die das watch-Attribut auf dem <geolocation>-Element einschließt und daher Standortdaten jedes Mal abruft, wenn sich die Position des Geräts des Benutzers ändert (sehen Sie es live an, und der Quellcode).

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

Für eine Erläuterung eines vollständigeren Beispiels, das Standortdaten nutzt, um eine Karte Ihres lokalen Gebiets zu erstellen, siehe die HTMLGeolocationElement-Referenzseite.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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