[PHP]IP to location tramite JSON

Printable View

03-09-2016, 17.20.01
gutguy2

[PHP]IP to location tramite JSON

Ciao,
Come faccio a fare in modo che il seguente codice

Codice:

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body>  <hr/> <div id="ip"></div> <div id="address"></div> <input type="text" value="" id="city" /> <script type="text/javascript"> $.get("http://ipinfo.io", function (response) { $("#address").html("Location: " + response.ip + ", "+ response.city + ", "+ response.region + ", " + response.country); $("#details").html(JSON.stringify(response, null, 4)); $("#city").html(response.city); document.getElementById('city').value = response.city; }, "jsonp"); </script> </body> </html>

visualizzi ad es.

Codice:

8.8.8.8, Mountain View, California, US https://s9.postimg.io/85xpx43hr/stat..._37_3860_1.png

dove l'immagine punta a:

Codice:

http://maps.googleapis.com/maps/api/staticmap?visible=42.402354,12.862117|$loc&zoom=2&size=640x640&scale=4&format=png&maptype=road&markers=size:big|color:red|label:V|$loc&visual_refresh=true

e dove "$loc" è una variabile che assume il valore del campo "loc" fornito dal json
per rimanere nell'esempio di 8.8.8.8 loc è uguale a 37.3860,-122.0838

spero di essermi spiegato e grazie a chi risponderà
03-09-2016, 19.58.48
gutguy2

ho fatto

Codice:

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <hr/> <div id="ip"></div> <div id="address"></div> <input type="text" value="" id="loc" /> <script type="text/javascript"> $.get("http://ipinfo.io", function (response) { $("#map").html("<img src='https://maps.googleapis.com/maps/api/staticmap?size=300x300&sensor=false&zoom=10&center=" + response.loc +"'/>"); }, "jsonp"); </script> </body> </html>

ma non visualizza nulla
04-09-2016, 13.25.36
mzanella

Devi aggiungere contenitore con id="map", in modo che la funzione di callback possa selezionarlo e crearci un'immagine dentro.

Anziché creare un nuovo elemento HTML in questo modo, però, credo sarebbe meglio definire un'immagine inizialmente vuota ed impostarne l'attributo src tramite jQuery a seguito della richiesta AJAX.
04-09-2016, 21.25.26
gutguy2

e come posso fare a farlo, non ho capito molto bene, purtroppo sono un po' arruginito...
04-09-2016, 21.30.35
mzanella

Questo è il più piccolo esempio funzionante:

Codice HTML:

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <img src="" alt="map" id="map" /> <script type="text/javascript"> $.get("http://ipinfo.io", function (response) { $("#map").attr('src', "https://maps.googleapis.com/maps/api/staticmap?size=300x300&sensor=false&zoom=10&center=" + response.loc); }, "jsonp"); </script> </body> </html>
04-09-2016, 21.43.44
gutguy2

grazie mille, va benissimo :)
ma come faccio ad appendere

Codice:

"&markers=size:big|color:red|label:H|" + response.loc

a

Codice:

"https://maps.googleapis.com/maps/api/staticmap?size=300x300&sensor=false&zoom=10&center=" + response.loc

?
se faccio

Codice:

"https://maps.googleapis.com/maps/api/staticmap?size=300x300&sensor=false&zoom=10&markers=size:big|color:red|label:H|" + response.loc"&center=" + response.loc

non va
05-09-2016, 15.42.07
gutguy2

ho risolto con

Codice:

"https://maps.googleapis.com/maps/api/staticmap?&center=&size=500x500&sensor=false&zoom=10&scale=1&format=png&maptype=terrain&markers=size:big|color:red|label:I|" + response.loc

in pratica uso il dato fornito dal json per alimentare il marker e lasciando center vuoto ottengo lo stesso risultato cmq di avere la mappa centrata
11-09-2016, 21.35.02
gutguy2

ciao,
ho ora questo codice:

Citazione:

<html>
<head>
<script src="http://gutguy2.altervista.org/jquery/jquery-1.9.1.js"></script>
<script>window.jQuery ||
document.write("<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>\x3C/script>")
</script>
</head>
<body>

<div id="ip"></div>
<div id="address"></div>

<script type="text/javascript">
$.get("http://ipinfo.io", function (response) {

$("#address").html(response.country);
$("#details").html(JSON.stringify(response, null, 4));
$("#city").html(response.city);
document.getElementById('city').value = response.city;
}, "jsonp");
</script>
</body>
</html>

che mi restituisce il codice iso2 della nazione del visitatore (es. "IT"), mi chiedo come faccio ad utilizzarlo con http://country.io/names.json che contiene un mapping tra i codici nazioni e i loro nomi, queste le prime righe

Codice:

{"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria"}

in modo tale che per es. invece di "IT" per il visitatore con un isp italiano visualizzi "Italy"?
12-09-2016, 10.34.28
mzanella

Gli oggetti in JavaScript possono essere acceduti allo stesso modo dei vettori:

Codice:

var nazioni = {"BD": "Bangladesh", "BE": "Belgium", ...}; var iso2 = "IT"; var nome_nazione = nazioni[iso2];
19-09-2016, 14.53.45
gutguy2

Citazione:

Originalmente inviato da mzanella

Gli oggetti in JavaScript possono essere acceduti allo stesso modo dei vettori:

Codice:

var nazioni = {"BD": "Bangladesh", "BE": "Belgium", ...}; var iso2 = "IT"; var nome_nazione = nazioni[iso2];

cosa intendi, scusami ma non sono afferrato come te, come dovrei riscrivere il codice sopra allora?
Ti ringrazio per la pazienza...
19-09-2016, 19.11.44
mzanella

Una volta ottenuto l'iso1, puoi effettuare una nuova richiesta AJAX verso http://country.io/names.json, ottenendo il JSON che associa i codici alle nazioni. Allora potrai leggere la nazione associata al codice e farne ciò che vuoi:

Codice:

... var iso2 = ...; $.get("http://country.io/names.json"), function (names) { var county = names[iso2]; });
26-09-2016, 14.50.58
gutguy2

Citazione:

Originalmente inviato da mzanella

Una volta ottenuto l'iso1, puoi effettuare una nuova richiesta AJAX verso http://country.io/names.json, ottenendo il JSON che associa i codici alle nazioni.

rinnovo il ringraziamento anche per la pazienza, ma come faccio ad impostare l'iso1?
27-09-2016, 12.40.47
mzanella

Più che impostarlo, devi leggerlo e poi utilizzarlo per recuperare il nome esteso. Basta estendere il codice che già avevi:

Codice:

$.get("http://ipinfo.io", function (response) { $("#address").html(response.country); ... var iso2 = response.iso2; // suppongo che il campo si chiami iso2, controlla che sia effettivamente così! $.get("http://country.io/names.json"), function (names) { var county = names[iso2]; $("#country").html(country); // Userai il nome esteso "country" in qualche modo }); }, "jsonp");

PS: Non mi è più chiaro se ti serve l'iso1 o l'iso2, in ogni caso il codice è fondamentalmente lo stesso.