PHP-使用ajax和PHP获取当前地图位置并将详细信息插入数据库_Php_Jquery_Html_Ajax_Pdo

PHP-使用ajax和PHP获取当前地图位置并将详细信息插入数据库

php jquery html ajax

PHP-使用ajax和PHP获取当前地图位置并将详细信息插入数据库,php,jquery,html,ajax,pdo,Php,Jquery,Html,Ajax,Pdo,这将帮助您获取当前位置，在浏览器上显示它，并使用php、javascript和ajax将其保存到数据库中 HTML页面-index.HTML <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri

这将帮助您获取当前位置，在浏览器上显示它，并使用php、javascript和ajax将其保存到数据库中

HTML页面-index.HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type = "text/javascript">
        var getLocLatitude = "";
        var getLocLongitude = "";
        var locDetails = new Array();
        var img = new Image();

        $(document).ready(geoFindMyLocation);

        function geoFindMyLocation() {

            var output = document.getElementById("maplocation");

            if (!navigator.geolocation) {
                locDetails.push("Geolocation is not supported by your browser");
                return;
            }

            function success(position) {

                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;
                getLocLatitude = latitude;
                getLocLongitude = longitude;

                var latlng = latitude + "," + longitude;
                var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&sensor=false";

                img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false&key=AIzaSyBJ3vEue3yTVxWjo7i3QZiQBH0Eg2m7E4M";
                output.appendChild(img);
                getLocationDetailFromGeoLocation(url);
            };

            function error() {
                locDetails.push("Unable to retrieve your location");
            };

            navigator.geolocation.getCurrentPosition(success, error);

            $('#save_to_db').click(function() {
                var street = $('#street').html();
                var area = $('#area').html();  
                var city = $('#city').html();
                var state = $('#state').html();
                var country = $('#country').html();
                $.ajax({
                    url: 'saveit.php',
                    type: 'POST',
                    data: {
                        street: street, area: area, city: city, state: state, country: country
                    }
                });
             });

        }

        function getLocationDetailFromGeoLocation(url) {

            $.getJSON(url, function (data) {

                for (var i = 0; i < data.results.length; i++) {
                    var address = data.results[i].formatted_address;
                    locDetails.push(address);

                    document.getElementById("street").innerHTML = locDetails[0];
                    document.getElementById("area").innerHTML = locDetails[1];
                    document.getElementById("city").innerHTML = locDetails[2];
                    document.getElementById("state").innerHTML = locDetails[3];
                    document.getElementById("country").innerHTML = locDetails[4];
                }   

            });
        }


    </script>
</head>
<body>
    <div id="maplocation"></div>
    <br>
    DETAILS:
    <div id="street"></div>
    <div id="area"></div>
    <div id="city"></div>
    <div id="state"></div>
    <div id="country"></div>
    <br>
    <button id="save_to_db">Save To DB</button>
</body>

这是一个完整的解决方案-它运行良好

因为PHP是一种服务器端语言，您必须使用Javascript或更好的JQuery

CREATE TABLE `maptable` (
`id` int(11) NOT NULL,
`street` varchar(100) NOT NULL,
`area` varchar(50) NOT NULL,
`city` varchar(50) NOT NULL,
`state` varchar(50) NOT NULL,
`country` varchar(50) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

工作

问题是什么？另外，作为一个补充说明，您应该真正验证/清理来自前端的任何内容，特别是当它进入数据库时。是的，您是对的。谢谢，但这只是一个解决办法。任何需要它的人都可以验证/清理或修改它以适应口味。这个解决方案如何将其保存到db？要保存这些内容，您必须使用GET或POST对php页面进行ajax调用，并在php页面中保存变量。

CREATE TABLE `maptable` (
`id` int(11) NOT NULL,
`street` varchar(100) NOT NULL,
`area` varchar(50) NOT NULL,
`city` varchar(50) NOT NULL,
`state` varchar(50) NOT NULL,
`country` varchar(50) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

$(document).ready(function(){
            //Chek if API is aviable
            if (navigator.geolocation) {
                //Get coords
                navigator.geolocation.getCurrentPosition(function(position) {
                    //alert for demo
                    alert("Lat: " + position.coords.latitude + " / Long: " + position.coords.longitude)
                    //Store your coords....
                }, showError); //Geolocation error
            }

            function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("User denied the request for Geolocation.");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("Location information is unavailable.");
                        break;
                    case error.TIMEOUT:
                        alert("The request to get user location timed out.");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("An unknown error occurred.");
                        break;
                }
            }
        });