Trying to save coordinates from maps

问题

Im retreiving coordinates via HTML5. But when I try to save the coordinates with an AJAX post nothing is inserted. savespot.php does work, so maybe its problem with the ajax post? Or is ajax post run before coordinates is retrieved?

<!DOCTYPE html>
<html>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <body>
        <p id="demo">Click the button to get your position:</p>
        <button onclick="getLocation()">Get your location</button>
        <div id="mapholder"></div>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script>
            var x=document.getElementById("demo");
            function getLocation()
            {
                if (navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition(showPosition,showError);
                }
                else{x.innerHTML="Geolocation is not supported by this browser.";}
            }
            function showPosition(position)
            {
                lat=position.coords.latitude;
                lon=position.coords.longitude;
                latlon=new google.maps.LatLng(lat, lon)
                mapholder=document.getElementById('mapholder')
                mapholder.style.height='250px';
                mapholder.style.width='500px';
                var myOptions={
                    center:latlon,zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP,
                    mapTypeControl:false,
                    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
                };
                var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
                var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
            }
            function showError(error)
            {
                switch(error.code)
                {
                    case error.PERMISSION_DENIED:
                        x.innerHTML="User denied the request for Geolocation."
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML="Location information is unavailable."
                        break;
                    case error.TIMEOUT:
                        x.innerHTML="The request to get user location timed out."
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML="An unknown error occurred."
                        break;
                }
            }
        </script>
        <script>
            function ajaxFunction()
            { 
                $.ajax({ 
                    url:'savespot.php', 
                    type:'POST', 
                    data:'lat='+lat+'&lon='+lng, 
                    success:function(d){ 
                        console.log(d); 
                    }, 
                    error(w,t,f){ 
                        console.log(w+' '+t+' '+f); 
                    } 
                }); 
            }
        </script>
    </body>
</html>

savespot.php

<?php

    include_once 'includes/db.php';

    //  $x = "52.364659"; 
    //  $y = "13.191007"; 
    $nick = "GPSTEST";
    $adress = "Odefinierat";

    $x = @$_POST['lat'];
    $y = @$_POST['lng'];


    $sql = 'INSERT INTO location ' .
            '(name, address, lat, lng, date) ' .
            'VALUES ("' . $nick . '", "' . $adress . '", "' . $x . '", "' . $y . '", NOW())';

    $retval = mysql_query($sql, $connection);
    if (!$retval) {
        die('Could not enter data: ' . mysql_error());
    }
    echo "Entered data successfully\n";
?>

回答1:

There is an error in your AJAX Setup.

$.ajax({ 
    url:'savespot.php', 
    type:'POST', 
    data:'lat='+lat+'&lon='+lng, 
    success:function(d){ 
        console.log(d); 
    }, 
    error(w,t,f){ 
        console.log(w+' '+t+' '+f); 
    } 
});

Should give error: infront of the error(w,t,f){}.

    error: error(w,t,f){ 
        console.log(w+' '+t+' '+f); 
    }

回答2:

Try declaring you ajax data like this:

$.ajax({ 
  url:'savespot.php', 
  type:'POST', 
  data:{
    lat:lat,
    lon:lng
  }
});

回答3:

I cannot find where/how you call ajaxFunction, and without knowing that I can't be sure, but my best guess is that you make the Ajax-request before the position has been retrieved.

navigator.geolocation.getCurrentPosition is asynchronus, and it will wait until the user has accepted that your page wants to retrieve their geoposition. Until they do, the function will return nothing. The best way to handle this is to make the ajax-request in the callback for getCurrentPosition, that way you know for sure that you have the position, before you make the call.

In your case, that would mean that you call ajaxFunction() from within showPosition().

回答4:

I think that the variables lat and lon should be declared with a global scope or in other words you need to declare it out of the showPosition() function.

来源：https://stackoverflow.com/questions/12723412/trying-to-save-coordinates-from-maps

标签

php

jquery

mysql

maps