Punkt auf Karte anzeigen und alle 0,5 Sekunden updaten

ano.nym

gesperrt
Registriert
31 März 2020
Beiträge
206
Hallo,

ich bin da gerade an einem . Den Quellcode könnt ihr sehen. Ich möchte jetzt die Koordinaten, die alle 0,5 Sekunden geupdated werden dazu nutzen, um auf einer Karte (Apple MapKit, Google Maps oder Bing Maps, ..) einen Punkt darzustellen, der sich bewegt (ohne dass sich die Karte alle 0,5 Sekunden neu lädt natürlich). Was wäre denn die einfachste Lösung dafür?
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #3
Kann man den Marker auch verändern? Ich möchte einen blauen Punkt. Habe nur gesehen, dass man die Animation ändern kann.. und wie würde das dann funktionieren? Müsste ich dann bei jedem Update der Koordinaten den Marker entfernen und neu setzen?
 
Man kann ja auch eigene Icons als Marker setzen.
Auf der Seite gibt es ja noch zig andere Beispiele.
Man könnte auch Wege zeichnen wie in den Polygonen-Beispielen.

Aber ja die einfachste Möglichkeit dürfte sein einen Marker einzublenden und den alten zu entfernen.
 
Du magst doch gerne JavaScript. Da gibt's ;)

Siehe auch: /

Oh, und schau dir auch mal an. Das ist eine Open Source Software, mit der man mittels einer Android-App und eines Webservers die GPS-Bewegungen von Smartphones verfolgen kann. Ähnlich des Location Sharing von WhatsApp, Telegram und Co. kann man hier seinen Standort für eine definierte Zeit freigeben, nur eben FOSS, selfhosted und nicht vom Datenkra👎ken.
 
  • Thread Starter Thread Starter
  • #6
Jetzt habe ich dieses Leaflet.js eingebaut, aber man sieht die Karte nicht. Der Code wirft auch keine Fehler.

Das ist der Code:
 
Zuletzt bearbeitet:
und wo ist die zugehörige html/php-datei?
 
  • Thread Starter Thread Starter
  • #8
Hier:
Einfach den Quelltext im Browser öffnen.

Ich benutze für dieses Projekt kein PHP, nur JavaScript.

[src=html5]
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="P2P Location Sharing">

<meta property="og:title" content="P2P">
<meta property="og:description" content="P2P Location Sharing">
<meta property="og:image" content="lock.png">
<link rel="icon" href="favicon.ico">

<title>P2P Filesharing</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style>
#mapid { height: 300px; }
</style>
</head>

<body>
<div id="url"></div>
<div id="status">Nicht verbunden</div>
<div id="received">Warte</div>
<div id="map"></div>

<script src="js/peer.js"></script>
<script src="js/index.js"></script>
</body>
</html>[/src]

Habe den Fehler gefunden. Der Fehler war eine falsche ID (mapid anstatt map) im CSS.
Jetzt wird die Karte zwar dargestellt, aber man sieht keine Straßen, usw.

--- [2020-05-13 16:20 CEST] Automatisch zusammengeführter Beitrag ---

Thread kann geschlossen werden, es funktioniert jetzt endlich. :)
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #10
Ich wollte mir egtl. das Ergebnis mal anschauen, nicht nur den Quelltext. Ich bekomme:

Brauch ich da den Superduperbrowser von der Datenkrake, oder soll das so?

Das soll so.

In der ersten Zeile erhältst du einen Link, den du mit jemanden teilen kannst oder selbst in einem neuen Tab aufrufen kannst. Dann musst du auf beiden Tabs Ortung aktivieren. Erst dann zeigt sich die Karte. Viel Spaß damit :)

Wichtig: WebRTC muss im Browser aktiviert sein.
 
Na weil Google irgendwann WebRTC gekauft hat.

So einen Hinweis auf der Seite sollte man schon anbringen (niemand nutzt sonst WebRTC), das wäre besser als die tollen Browser-Hinweise, dass die Seite Links in die Zwischenablage kopiert oder den Standort abfragen will.
 
WebRTC um die beides Tabs zu syncen oder wozu? Dazu kannst du auch localstorage nehmen.
Klingt für mich etwas strange, du setzt techniken wie WebRTC ein, kriegst es aber nicht hin ein Interval zu schreiben?
 
  • Thread Starter Thread Starter
  • #14
Du sollst den Link ja auch an einen Freund per WhatsApp schicken, damit dieser drauf klickt. Dann siehst du wo er sich befindet und er sieht wo du dich befindest.

Ich wäre vorsichtig mit solchen Aussagen:
Klingt für mich etwas strange, du setzt techniken wie WebRTC ein, kriegst es aber nicht hin ein Interval zu schreiben?

Scheinbar hast du nicht ein mal verstanden wozu das ganze dienen soll. An welcher Stelle funktioniert denn das Interval deiner Meinung nach nicht?

* Die Technologie heißt , nicht localstorage.
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #16
@c1i: Dann siehst du aber immer noch nicht wo sich dein Freund befindet. Mit meinem Codeschnipsel sehen beide Teilnehmer wo sich jeweils der andere befindet.
 
Zuletzt bearbeitet:
Zurück
Oben