HTML5 Geolocation

In diesem Lernprogramm erfahren Sie, wie Sie mithilfe der HTML5-Geolokalisierungsfunktion den Standort des Benutzers ermitteln.

Was ist Geolocation?

Mit der HTML5-Geolokalisierungsfunktion können Sie die geografischen Koordinaten (Breiten- und Längengrade) des aktuellen Standorts des Besuchers Ihrer Website ermitteln.

Diese Funktion ist hilfreich, um dem Website-Besucher ein besseres Surferlebnis zu bieten. Beispielsweise können Sie die Suchergebnisse zurückgeben, die sich physisch in der Nähe des Standorts des Benutzers befinden.

Koordinaten eines Besuchers finden

Das Abrufen der Positionsinformationen des Site-Besuchers mithilfe der HTML5-Geolocation-API ist recht einfach. Es nutzt die drei Methoden , die in den verpackt sind navigator.geolocationGegenstand - getCurrentPosition(), watchPosition()und clearWatch().

Das folgende Beispiel zeigt die Geolokalisierung, in der Ihre aktuelle Position angezeigt wird. Zunächst müssen Sie jedoch zustimmen, dass der Browser dem Webserver Ihre Position mitteilt.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Current Position</title>
<script>
    function showPosition() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
                document.getElementById("result").innerHTML = positionInfo;
            });
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

Hinweis: Die Webbrowser teilen den Besucherstandort nur dann mit einer Webseite, wenn der Besucher eine ausdrückliche Genehmigung erteilt. Der Geolocation-Standard macht es zu einer offiziellen Regel, für jede Website, die Standortdaten wünscht, eine Benutzerberechtigung zu erhalten.

Umgang mit Fehlern und Ablehnungen

Es kann vorkommen, dass ein Benutzer seine Standortdaten nicht mit Ihnen teilen möchte. Um mit solchen Situationen umzugehen, können Sie beim Aufrufen der getCurrentLocation()Funktion zwei Funktionen bereitstellen .

Die erste Funktion wird aufgerufen, wenn Ihr Geolokalisierungsversuch erfolgreich ist, während die zweite aufgerufen wird, wenn Ihr Geolokalisierungsversuch fehlschlägt. Schauen wir uns ein Beispiel an:

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handling Geolocation Errors</title>
<script>
    // Set up global variable
    var result;
    
    function showPosition() {
        // Store the element where the page displays the result
        result = document.getElementById("result");
        
        // If geolocation is available, try to get the visitor's position
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
            result.innerHTML = "Getting the position information...";
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    };
    
    // Define callback function for successful attempt
    function successCallback(position) {
        result.innerHTML = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
    }
    
    // Define callback function for failed attempt
    function errorCallback(error) {
        if(error.code == 1) {
            result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
        } else if(error.code == 2) {
            result.innerHTML = "The network is down or the positioning service can't be reached.";
        } else if(error.code == 3) {
            result.innerHTML = "The attempt timed out before it could get the location data.";
        } else {
            result.innerHTML = "Geolocation failed due to unknown error.";
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

Standort auf Google Map anzeigen

Mit Geolokalisierungsdaten können Sie sehr interessante Dinge tun, z. B. den Standort des Nutzers auf der Google-Karte anzeigen. Das folgende Beispiel zeigt Ihren aktuellen Standort auf der Google-Karte basierend auf den Breiten- und Längengraddaten, die über die HTML5-Geolokalisierungsfunktion abgerufen wurden.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using the Google Maps</title>
<script>
    function showPosition() {
        navigator.geolocation.getCurrentPosition(showMap);
    }
    
    function showMap(position) {
        // Get location data
        var latlong = position.coords.latitude + "," + position.coords.longitude;
        
        // Set Google map source url
        var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
        
        // Create and insert Google map
        document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
    }
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Show My Position on Google Map</button>
    <div id="embedMap">
        <!--Google map will be embedded here-->
    </div>
</body>
</html>

Das obige Beispiel zeigt einfach den Standort auf der Google-Karte anhand eines statischen Bildes. Sie können jedoch auch interaktive Google Maps mit Ziehen, Vergrößern / Verkleinern und anderen Funktionen erstellen, auf die Sie in Ihrem wirklichen Leben gestoßen sind. Schauen wir uns das folgende Beispiel an:

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using the Google Maps</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showMap, showError);
    } else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}
 
// Define callback function for successful attempt
function showMap(position) {
    // Get location data
    lat = position.coords.latitude;
    long = position.coords.longitude;
    var latlong = new google.maps.LatLng(lat, long);
    
    var myOptions = {
        center: latlong,
        zoom: 16,
        mapTypeControl: true,
        navigationControlOptions: {
            style:google.maps.NavigationControlStyle.SMALL
        }
    }
    
    var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
    var marker = new google.maps.Marker({ position:latlong, map:map, title:"You are here!" });
}
 
// Define callback function for failed attempt
function showError(error) {
    if(error.code == 1) {
        result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
    } else if(error.code == 2) {
        result.innerHTML = "The network is down or the positioning service can't be reached.";
    } else if(error.code == 3) {
        result.innerHTML = "The attempt timed out before it could get the location data.";
    } else {
        result.innerHTML = "Geolocation failed due to unknown error.";
    }
}
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Show My Position on Google Map</button>
    <div id="embedMap" style="width: 400px; height: 300px;">
        <!--Google map will be embedded here-->
    </div>
</body>
</html>

Weitere Informationen zur Javascript-API von Google Maps finden Sie unter der folgenden URL: https://developers.google.com/maps/documentation/javascript/reference .

Überwachung der Besucherbewegung

Alle Beispiele, die wir bisher verwendet haben, haben sich auf die getCurrentPosition()Methode verlassen. Das Geolocation-Objekt verfügt jedoch über eine andere Methode watchPosition(), mit der Sie die Bewegung des Besuchers verfolgen können, indem Sie die aktualisierte Position zurückgeben, wenn sich der Standort ändert.

Das watchPosition()hat die gleichen Eingabeparameter wie getCurrentPosition(). Allerdings watchPosition()auslösen kann den Erfolg Funktion mehrmals - wenn es die Lage zum ersten Mal bekommt, und wieder, wann immer es eine neue Position erkennt. Mal sehen, wie das funktioniert:

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Watching Position</title>
<script>
    // Set global variable
    var watchID;

    function showPosition() {
        if(navigator.geolocation) {
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }

    function successCallback(position) {
        toggleWatchBtn.innerHTML = "Stop Watching";
        
        // Check position has been changed or not before doing anything
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            
            // Set previous location
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;
            
            // Get current position
            var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
            
        }
        
    }

    function startWatch() {
        var result = document.getElementById("result");
        
        var toggleWatchBtn = document.getElementById("toggleWatchBtn");
        
        toggleWatchBtn.onclick = function() {
            if(watchID) {
                toggleWatchBtn.innerHTML = "Start Watching";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            } else {
                toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
                showPosition();
            }
        }
    }
    
    // Initialise the whole system (above)
    window.onload = startWatch;
</script>
</head>
<body>
    <button type="button" id="toggleWatchBtn">Start Watching</button>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>   
</body>
</html>