PHP -使用ajax和PHP获取当前地图位置并将详细信息插入数据库 - PHP - To get current Map Location and insert details into database using ajax and php

这可以帮助您获得当前位置，将其显示在浏览器上，并使用php, javascript和ajax将其保存到数据库。

HTML PAGE - 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 PAGE - saveit.php

<?php
$street = $_POST['street']; //get posted data    
$area = $_POST['area'];
$city = $_POST['city'];
$state = $_POST['state']; 
$country = $_POST['country']; 
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mapdb";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare ("INSERT INTO maptable (street, area, city, state, country) VALUES (:street, :area, :city, :state, :country)");
    $stmt -> bindParam(':street', $street);
    $stmt -> bindParam(':area', $area);
    $stmt -> bindParam(':city', $city);
    $stmt -> bindParam(':state', $state);
    $stmt -> bindParam(':country', $country);
    $stmt -> execute();
    echo "Map Details inserted successfully";
    }
catch(PDOException $e)
    {
    echo $stmt . "<br>" . $e->getMessage();
    }
   $conn = null;
?>

SQL数据库表

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;

这是一个完整的解决方案-它工作良好

由于PHP是服务器端语言，因此必须使用Javascript或更好的JQuery。

工作演示。

$(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;
                }
            }
        });