[Erledigt] Bitte um Javascript-Hilfe

kls · 25. Februar 2015

Ich bin gerade dabei, den "VDR User Counter" etwas aufzumotzen. Dabei möchte ich den ungefähren Ort des Users aus der IP-Nummer ermitteln (das klappt bereits) und das Ganze mit einer Karte anzeigen. Ich habe das mal auf

http://www.tvdr.de/x.htm

in einem Mini-Beispiel zusammengestellt.
Soweit klappt das schon recht schön. Wenn man den Marker mit der Maus verschiebt, dann wird die Anzeige im "Location:"-Feld entsprechend aktualisiert. Nun hätte ich aber auch gern, daß eine manuelle Veränderung im "Location:"-Feld umgekehrt den Marker entsprechend verschiebt. Das sollte in der Funtion locChanged() passieren, aber was da abläuft verstehe ich einfach nicht.
Wenn ich z.B. eine Ziffer im Eingabefeld lösche, dann erhalte ich an der Debug-Konsole folgende Ausgaben:

"(48.42076155285042, 12.340000000000032)" x.htm:20
"loc = " "(48.42076155285042, 12.34)" x.htm:32
"inp = " "(48.4207615528504, 12.34)" x.htm:33
"A" "(48.42076155285042, 12.340000000000032)" x.htm:35
"B" "(48.42076155285042, 12.340000000000032)" x.htm:37
"C" "(NaN, NaN)" x.htm:39

Die Ausgaben "A" und "B" zeigen das, was ich erwarte. Aber warum liefert marker.getPosition().toString() bei "C" "(NaN, NaN)"?

Leider bin ich, was Javascript betrifft, ein ziemlicher Laie. Vielleicht ist das ja für einen Experten ein ganz offensichtlicher Fehler, den ich da mache. Kann mir da vielleicht jemand weiterhelfen?

Klaus

louis · 25. Februar 2015

Hi Klaus,

keine direkte Hilfe, aber ein Tipp: wenn du dir das Leben vereinfachen willst: benutze jquery. Natives javascript finde ich grausam, mit jquery ist es gerade so ertragbar

Ciao Louis

hepi · 25. Februar 2015

In Zeile 38 ist ein Fehler:

Code

marker.setPosition(new google.maps.LatLng(locationInput.value));

locationInput.value liefert einen String zurück und keine zwei Float-Zahlen, die durch ein Komma getrennt sind. Du musst die Nutzereingabe locationInput.value wohl trimmen (Klammern an Anfang und Ende wegschneiden) und aufsplitten über locationInput.value.split(","), dann hast Du zwei Strings. Die Strings kannst Du mit parseFloat() konvertieren. Und dann zwei Parameter übergeben.

Gruß
hepi

chriszero · 25. Februar 2015

dito.
oder AngularJS. MVW Framwork, Databinding, Getrennter View.

Zum Problem:
marker.setPosition() erwartet keinen String, sondern ein LatLngLiteral object => {lat: -34, lng: 151}

M-Reimer · 25. Februar 2015

Wie genau soll die endgültige Benutzerführung sein? Frage deshalb, weil ich mir nicht vorstellen kann, dass jemand wirklich händisch Koordinaten eingibt.

Und noch wichtiger: Darf es auch OpenStreetMap sein? Bei dem Google-Kram bekomme ich immer Würgereflex

Beim Umsetzen der Karte kann ich eventuell aushelfen. Ich trage nicht nur selber zu OpenSteetMap bei sondern habe auch schon Online-Karten gemacht.

TheChief · 25. Februar 2015

Zitat von M-Reimer

Wie genau soll die endgültige Benutzerführung sein? Frage deshalb, weil ich mir nicht vorstellen kann, dass jemand wirklich händisch Koordinaten eingibt.

Für sowas gibts beispielsweise GeoIP und/oder das GoogleMaps Api. Bestimmt gibts auch sowas von OSM.

M-Reimer · 25. Februar 2015

Man kann über die geolocation-API beim Browser anfragen. Das ist die "saubere" Lösung, denn dann bekommt man auch vom Browser eine Rückfrage der Form "Webseite will Ihre Position bestimmen...". Eine entsprechende Abfrage haben die gängigen APIs direkt eingebaut:

http://leafletjs.com/reference.html#map-locate
http://dev.openlayers.org/docs…Control/Geolocate-js.html

kls · 25. Februar 2015

Zitat von louis

keine direkte Hilfe, aber ein Tipp: wenn du dir das Leben vereinfachen willst: benutze jquery. Natives javascript finde ich grausam, mit jquery ist es gerade so ertragbar

Ich brauche ja bloß die paar Zeilen und habe nicht vor, da wirklich tiefer einzusteigen ;-).

Klau

kls · 25. Februar 2015

Zitat von hepi
In Zeile 38 ist ein Fehler:
Code
marker.setPosition(new google.maps.LatLng(locationInput.value));
locationInput.value liefert einen String zurück und keine zwei Float-Zahlen, die durch ein Komma getrennt sind. Du musst die Nutzereingabe locationInput.value wohl trimmen (Klammern an Anfang und Ende wegschneiden) und aufsplitten über locationInput.value.split(","), dann hast Du zwei Strings. Die Strings kannst Du mit parseFloat() konvertieren. Und dann zwei Parameter übergeben.

Danke, das war der entscheidende Hinweis.
Damit funktioniert es jetzt:

HTML

<!DOCTYPE HTML SYSTEM>
<html>
  <body>
     <form enctype=multipart/form-data>
     <table width="100%" border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="#DDDDDD">
     <table>
     <tr><td>Location:    </td><td><input id=location oninput='locChanged()' type=text name=location value="(48.42076155285042, 12.34)" size=40 maxlength=100></td></tr>
     <tr><td>             </td><td><div id="map-canvas" style="height: 200;"></div></td></tr>
     </table>
     <script type="text/javascript"
       src="https://maps.googleapis.com/maps/api/js">
     </script>
     <script type="text/javascript">
       var map;
       var marker;
       var locationInput;
       function initialize() {
         var LatLng = new google.maps.LatLng(48.42076155285042,12.34);
         var mapOptions = { center: LatLng, zoom: 8, streetViewControl: false };
         map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
         marker = new google.maps.Marker({ position: LatLng, map: map, draggable: true, title: 'drag to correct your location' });
         locationInput = document.getElementById('location');
         google.maps.event.addListener(marker, 'dragend', function() {
           locationInput.setAttribute('value', marker.getPosition());
           });
       }
       function locChanged() {
         var c = locationInput.value.replace("(", "").replace(")","").split(",");
         marker.setPosition(new google.maps.LatLng(c[0], c[1]));
         map.setCenter(marker.getPosition());
         }
       google.maps.event.addDomListener(window, 'load', initialize);
     </script>
     </form>
  </body>
</html>

Alles anzeigen

Da kommen freilich noch ein paar Checks dazu, aber prinzipiell macht es jetzt das, was es soll.

Klaus

kls · 25. Februar 2015

Zitat von M-Reimer

Wie genau soll die endgültige Benutzerführung sein? Frage deshalb, weil ich mir nicht vorstellen kann, dass jemand wirklich händisch Koordinaten eingibt.

Es könnte ja sein, daß jemand Javascript ausgeschaltet hat, aber seine Koordinaten von woanders her kennt und da einfach einfügt.

Zitat

Und noch wichtiger: Darf es auch OpenStreetMap sein? Bei dem Google-Kram bekomme ich immer Würgereflex

Ich bin froh, das mit Google-Maps relativ schnell und einfach hinbekommen zu haben ;-).

Klaus

kls · 25. Februar 2015

Die Koordinaten hole ich übrigens mit

http://ip-api.com/csv

Klaus

ATD · 26. Februar 2015

Zitat von kls

Die Koordinaten hole ich übrigens mit

http://ip-api.com/csv

Die „Genauigkeit“ lässt zum Wünschen übrig. Wenigstens erfasst Du alle große Rechenzentren/Knotenpunkten von allen ISPs.

Albert

louis · 26. Februar 2015

Zitat von ATD

Die „Genauigkeit“ lässt zum Wünschen übrig. Wenigstens erfasst Du alle große Rechenzentren/Knotenpunkten von allen ISPs.

Hauptsache mal blöd dahergefaselt...

Ciao Louis

kls · 26. Februar 2015

Zitat von ATD

[quote='kls','index.php?page=Thread&postID=1235810#post1235810']
Die „Genauigkeit“ lässt zum Wünschen übrig.

Genauer wird es automatisch halt nicht gehen. Und außerdem biete ich ja die Karte an, über die man seinen Standort beliebig genau angeben kann - wenn man will. So manchem wird es ja ganz recht sein, wenn nur der nächstgrößere Ort (oder noch weiter weg) angegeben wird. Und mir ist der *genaue* Standort eh nicht so wichtig. Er geht eher um die Verbreitung an sich, welche Länder und so.

Klaus

TheChief · 26. Februar 2015

Na da brauchst Du aber keinen externen Anbieter für ungenaue Informationen Da kannst Du auch GeoIP benutzen, z.B. libapache2-mod-geoip und entsprechende DB http://geolite.maxmind.com/dow…tabase/GeoLiteCity.dat.gz

wirbel · 26. Februar 2015

Wenn es dir um Infos um die Verteilung nach Ländern geht, dann wäre evtl. php web stat was für dich.

Damit bekommt man eine passwortgeschützte Aufschlüsselung der Webzugriffe nach Ländern, Seiten usw. So sieht das z.B für w_scan aus.

www.wirbel.htpc-forum.de/webstat.png

dxwilli · 26. Februar 2015

was machst du mit den Internetzugängen, die über ein Mobilsystem laufen ?

Ich z.B. nutze Call&Surf Funk bei der Telekom, und das ist ein Mobilzugang. Alle Systeme, die meinen Standort anhand der IP ermitteln
versagen in diesem Fall.

Gruss Willi

TheChief · 26. Februar 2015

Zitat von dxwilli

was machst du mit den Internetzugängen, die über ein Mobilsystem laufen ?

Ich zitiere mal

Zitat

Und außerdem biete ich ja die Karte an, über die man seinen Standort beliebig genau angeben kann - wenn man will. So manchem wird es ja ganz recht sein, wenn nur der nächstgrößere Ort (oder noch weiter weg) angegeben wird

ATD · 26. Februar 2015

Zitat von louis

Hauptsache mal blöd dahergefaselt...

Was hast Du denn am Herzen mein Guter!?

Zitat von kls

Genauer wird es automatisch halt nicht gehen.

Nein, aber 150 km Differenz (Luftlinie) auf eine Karte!?

Zitat von wirbel

So sieht das z.B für w_scan aus.

Das sieht sogar sehr gut aus.

Albert

Moorviper · 26. Februar 2015

Zitat

Nein, aber 150 km Differenz (Luftlinie) auf eine Karte!?

Zitat

Was hast Du denn am Herzen mein Guter!?

Wieso war doch berechtigt wie will man den genauen standort bei zb der telekom ermitteln?
Das geht nicht !!!
bei meinem Anschluss springt das durch ganz Hessen.
das geht höchsten bei unitymedia und co die "starre Strukturen" haben und man immer gleich in Internet geroutet wird.

[Erledigt] Bitte um Javascript-Hilfe

Jetzt mitmachen!

Teilen

Benutzer online in diesem Thema