Geolocation Standortabfrage, nur wenn GPS aktiviert?
Hallo und frohe Ostern allerseits =)
Mein Problem:
Ich habe eine Standortabfrage mit geolocation auf einer website, dass ganze funktioniert auch prima. Am Handy jedoch nur wenn am Gerät GPS aktiviert ist.
Also man muss es selbst einschalten, es erscheint wenn die Seite aufgerufen wird keine Meldung dass eine Standortermittlung erfolglt und man darüber GPS oder die Ortungsdienste aktivieren kann.
Wo hab ich den Fehler ? Bitte um Hilfe, vielen Dank =)
hier das Script
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, zeigeFehler, zeigePosition);
} else {
alert("Geolocation nicht verfügbar");
};
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
getMap(latitude, longitude);
zeigePosition(position);
}
function zeigePosition(position) {
ausgabe.innerHTML = "Ihre Koordinaten:<br> Breite: " + position.coords.latitude +
"<br>Länge: " + position.coords.longitude + "<br>" + "Höhenmeter: " + position.coords.altitude + "<br>" + "Zeitstempel: " + position.timestamp;
}
function getMap(latitude, longitude) {
const map = L.map("map").setView([latitude, longitude], 25);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
L.marker([latitude, longitude]).addTo(map);
}
function zeigeFehler(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert = "Benutzer lehnte Standortabfrage ab."
break;
case error.POSITION_UNAVAILABLE:
alert = "Standortdaten sind nicht verfügbar."
break;
case error.TIMEOUT:
alert = "Die Standortabfrage dauerte zu lange (Time-out)."
break;
case error.UNKNOWN_ERROR:
alert = "unbekannter Fehler."
break;
}
}
1 Antwort
Hi, nach etlichen Videos und Tutorials hab ich für mich die passende Lösung gefunden und das ganze überarbeitet. Ich versuche jetzt noch einen Marker mit den gesammelten oder eingetragenen Werten zu positionieren und dann bin ich fertig.
Ich bin für jede Kritik dankbar, nur so kann ich was verbessern. MFG =)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoLocation-Test2</title>
</head>
<body>
<form>
<div class="form-group">
<label class="form-label" for="lat">Latitude</label>
<input class="form-input" id="lat" type="number" step="any" name="lat" placeholder="Latitude">
</div>
<div class="form-group">
<label class="form-label" for="lng">Longitude</label>
<input class="form-input" id="lng" type="number" step="any" name="lng" placeholder="Longitude">
</div>
<div class="form-footer">
<button type="button" onclick="getLocation()">Mein Standort</button>
</div>
<div class="form-footer">
<button type="button" onclick="displayOnMap()">Auf OpenStreetMap anzeigen</button>
<div id="iframedisplay"></div>
<div id="bigmap"></div>
</div>
</form>
<script type="text/javascript">
// Standortdaten ermitteln
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
}
else {
alert("Standortabfrage fehlgeschlagen ! Aktiviere GPS oder Ortungsdienste und versuche es erneut");
}
}
// Standortabfrage der Koordinaten
function onGeoSuccess(position) {
// Koordinaten in Variable speichern
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
// Erhaltene Daten in die jeweiligen Felder schreiben
document.getElementById("lat").value = latitude;
document.getElementById("lng").value = longitude;
}
// Error - Fehlermeldung ausgeben
function onGeoError(position) {
alert("Error code " + position.code + ". " + position.message);
}
// Standort auf Karte anzeigen - es werden die Daten aus den feldern ausgelesen
function displayOnMap() {
let lati = document.getElementById("lat").value;
let long = document.getElementById("lng").value;
// Ein iframe und Link mit und zur Karte von OpenStreetMap und den Koordinaten aus den Eingabefeldern werden erstellt
document.getElementById("iframedisplay").innerHTML = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="10" src="https://www.openstreetmap.org/export/embed.html?bbox='+long+'%2C'+lati+'%2C'+long+'%2C'+lati+'&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=17/'+lati+'/'+long+'">Größere Karte anzeigen</a></small>';
}
</script>
</body>
</html>