[PHP]IP to location tramite JSON

**gutguy2** · 03-09-2016, 17.20.01

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>
<!--Free usage of our API is limited to 1,000 API requests per day. If you exceed 1,000 requests in a 24 hour period we'll return a 429 HTTP status code to you. If you need to make more requests, or need SSL support, see our paid plans, which all have soft limits.-->
        <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

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à

**gutguy2** · 03-09-2016, 19.58.48

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

**mzanella** · 04-09-2016, 13.25.36

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.

**gutguy2** · 04-09-2016, 21.25.26

e come posso fare a farlo, non ho capito molto bene, purtroppo sono un po' arruginito...

**mzanella** · 04-09-2016, 21.30.35

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>

**gutguy2** · 04-09-2016, 21.43.44

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

**gutguy2** · 05-09-2016, 15.42.07

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

**gutguy2** · 11-09-2016, 21.35.02

ciao,
ho ora questo codice:

<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"?

**mzanella** · 12-09-2016, 10.34.28

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];

**gutguy2** · 19-09-2016, 14.53.45

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...

**mzanella** · 19-09-2016, 19.11.44

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];
});

**gutguy2** · 26-09-2016, 14.50.58

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?

**mzanella** · 27-09-2016, 12.40.47

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.

Discussione: [PHP]IP to location tramite JSON

LinkBack

Strumenti discussione

Display

[PHP]IP to location tramite JSON

Regole di scrittura