Ermitteln der Position eines Benutzers (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
In diesem Lernprogramm werden die erforderlichen Schritte behandelt, um mit der Windows-Runtime-Geolocation-API den geografischen Standort eines Benutzers zu bestimmen.
Ziel: Dabei erfahren Sie mehr über den einfachsten Weg, wie Sie den Standort bestimmen können. In dem Lernprogramm erstellen Sie eine einfache App, die Standortdaten einmalig anfordert. Wenn Sie die Methode getGeoPositionAsync wie in dem Beispiel unten nur einmal aufrufen, ist das für Apps, die eine Standortbestimmung für einmalige Aufgaben verwenden, wie das Versehen von E-Mails mit Geomarkierungen, möglicherweise bereits ausreichend. Wenn der Standort für Ihre App von grundlegender Bedeutung ist oder Ihre App Positionsupdates erfordert, sollten Standortereignisse wie im Thema Verhalten bei Standortupdates verarbeitet werden.
Voraussetzungen
Sie sollten mit HTML und JavaScript vertraut sein.
Anweisungen
1. Überprüfen, ob Positionsdienste aktiviert sind
Bevor Ihre App auf Positionsdaten zugreifen kann, muss Position auf dem Gerät aktiviert sein. Vergewissern Sie sich in der Einstellungs-App, dass die folgenden Datenschutzeinstellungen für den Standort aktiviert sind:
- Position dieses Geräts... ist aktiviert (gilt nicht für Windows 10 Mobile)
- Die Einstellung Position der Positionsdienste ist aktiviert.
- Ihre App hat unter Diese Apps dürfen meinen Standort verwenden die Einstellung Ein.
2. Öffnen von Microsoft Visual Studio
Öffnen Sie eine Instanz von Visual Studio.
3. Erstellen eines neuen Projekts
Erstellen Sie ein neues Projekt, und wählen Sie aus den Projekttypen unter JavaScript/Store-Apps den Typ Leere App aus.
4. Aktivieren der Positionsfunktion
Doppelklicken Sie im Projektmappen-Explorer sowohl für das Windows- als auch für das Windows Phone-Projekt auf package.appxmanifest, und wählen Sie die Registerkarte Funktionen aus. Aktivieren Sie dann in der Liste Funktionen die Option Position. Dadurch wird der Paketmanifestdatei die Gerätefunktion Location hinzugefügt.
<Capabilities>
<!-- DeviceCapability elements must follow Capability elements (if present) -->
<DeviceCapability Name="location"/>
</Capabilities>
5. Ersetzen des JavaScript-Codes
Öffnen Sie im Projekt "Shared" die Datei "default.js" (/js/default.js). Ersetzen Sie den Code in der Datei durch den folgenden.
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
args.setPromise(WinJS.UI.processAll().
done(function () {
// Add an event handler to the button.
document.querySelector("#getLocation").addEventListener("click",
getLoc);
}));
}
};
var loc = null;
function getLoc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function getStatusString(locStatus) {
switch (locStatus) {
case Windows.Devices.Geolocation.PositionStatus.ready:
// Location data is available
return "Location is available.";
break;
case Windows.Devices.Geolocation.PositionStatus.initializing:
// This status indicates that a GPS is still acquiring a fix
return "A GPS device is still initializing.";
break;
case Windows.Devices.Geolocation.PositionStatus.noData:
// No location data is currently available
return "Data from location services is currently unavailable.";
break;
case Windows.Devices.Geolocation.PositionStatus.disabled:
// The app doesn't have permission to access location,
// either because location has been turned off.
return "Your location is currently turned off. " +
"Change your settings through the Settings charm " +
" to turn it back on.";
break;
case Windows.Devices.Geolocation.PositionStatus.notInitialized:
// This status indicates that the app has not yet requested
// location data by calling GetGeolocationAsync() or
// registering an event handler for the positionChanged event.
return "Location status is not initialized because " +
"the app has not requested location data.";
break;
case Windows.Devices.Geolocation.PositionStatus.notAvailable:
// Location is not available on this version of Windows
return "You do not have the required location services " +
"present on your system.";
break;
default:
break;
}
}
app.start();
})();
6. Hinzufügen des HTML-Codes für die Apps
Öffnen Sie die Datei default.html für die Windows- und Windows Phone-Projekte, und kopieren Sie den folgenden HTML-Code zwischen die "BODY"-Tags der Datei.
<div>
<p>Click "Get Location" to get geolocation data.</p>
<br />
<button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
Latitude: <span id="latitude"></span><br />
Longitude: <span id="longitude"></span><br />
Accuracy (in meters): <span id="accuracy"></span><br />
Location Status: <span id="geolocatorStatus"></span><br />
Error Message: <span id="errormsg"></span><br />
</div>
7. Kompilieren der App
Klicken Sie im Menü Erstellen auf Projektmappe erstellen, um das Projekt zu erstellen.
8. Erstellen der App
Klicken Sie auf Erstellen > Projektmappe erstellen, um das Projekt zu erstellen.
9. Testen der App
- Klicken Sie im Menü Debuggen auf Debugging starten, um die Projektmappe zu testen.
- Wenn Sie das Beispiel zum ersten Mal ausführen, werden Sie gefragt, ob die App Ihre Position verwenden kann. Wählen Sie die Option Zulassen aus.
- Klicken Sie auf die Schaltfläche Get Location, um die aktuelle Position abzurufen.
Zusammenfassung
In dieser Schnellstartanleitung haben Sie eine einfache App zur Bestimmung des aktuellen Benutzerstandorts erstellt.
Die Anforderung des Standorts wird im folgenden Code initiiert. Durch den Code wird ein Geolocator-Objekt erstellt, die Methode getGeoPositionAsync aufgerufen, und es werden Handler für eine erfolgreiche und eine fehlerhafte Ausführung festgelegt:
function getloc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
Die Funktion "getPositionHandler" zeigt den Breitengrad, den Längengrad und die Genauigkeit an, wenn ein Standort verfügbar ist:
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
Die Funktion "errorHandler" ruft die Hilfsfunktion "getStatusString" auf, um eine entsprechende Statusmeldung anzuzeigen, wenn die Standortbestimmung nicht erfolgreich ausgeführt werden konnte:
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
Verwandte Themen
Geolocation-Beispiel für Windows 10