Miscelânea > Geolocalização

Exemplo 1 - com ajax

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div>Country: <span id="country"></span></div>
    <div>State: <span id="state"></span></div>
    <div>City: <span id="city"></span></div>
    <div>Latitude: <span id="latitude"></span></div>
    <div>Longitude: <span id="longitude"></span></div>
    <div>IP: <span id="ip"></span></div>
    <script>
      $.ajax({
            url: "https://geoip-db.com/jsonp",
            jsonpCallback: "callback",
            dataType: "jsonp",
            success: function(location) {
                $('#country').html(location.country_name);
                $('#state').html(location.state);
                $('#city').html(location.city);
                $('#latitude').html(location.latitude);
                $('#longitude').html(location.longitude);
                $('#ip').html(location.IPv4);
        }});
    </script>
<body>

Exemplo 2 - com inputs

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
    <form id="localizacao" >
        <input id="cidade" value="">
        <input id="estado" value="">
        <input id="pais" value="">
        <button   type="submit" class="btn btn-default ">Salvar</button>
    </form>
    <script type='text/javascript'>
            var lati = '';
            var long = '';
            var cidade = '';
            var estado = '';
            var pais = '';
            var dadosajax = '';

            navigator.geolocation.getCurrentPosition(function (posicao) {
                var url = "http://nominatim.openstreetmap.org/reverse?lat=" + posicao.coords.latitude + "&lon=" + posicao.coords.longitude + "&format=json&json_callback=preencherDados";

                var script = document.createElement('script');
                script.src = url;
                document.body.appendChild(script);
                lati = posicao.coords.latitude;
                long = posicao.coords.longitude;

            });

            function preencherDados(dados) {
                cidade = dados.address.city;
                estado = dados.address.state;
                pais = dados.address.country;

                //alert('cordenadas:' + lati + ',' + long + '    Lugar:' + cidade + ',' + estado + ',' + pais);

                document.getElementById('cidade').value = cidade;
                document.getElementById('estado').value = estado;
                document.getElementById('pais').value = pais;

                dadosajax = {'cidade':cidade, 'estado':estado, 'pais':pais};

                $("#localizacao").submit(function (e) {
                    e.preventDefault();
                    alert(dadosajax);
                    $.ajax({
                        type: "POST",
                        url: "teste6.php",
                        data: dadosajax

                    });
                });
            }
    </script>
</body>
</html>