PHP - 現在の地図の場所を取得し、ajaxとphpを使用してデータベースに詳細を挿入する

-1

これは、現在の場所を取得し、ブラウザに表示し、php、javascript、ajaxを使用してデータベースに保存するのに役立ちます。PHP - 現在の地図の場所を取得し、ajaxとphpを使用してデータベースに詳細を挿入する

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ページ - 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のを使用する必要があり、サーバー側の言語であるので、それは

出典

2016-10-26 tolulope owolabi

どのような質問がありますか？また、サイドノートとして、フロントエンドから来るものは、特にdbに入る場合は、実際に検証/消毒する必要があります。 – MCMXCII

そうです、そうです。ありがとう、ただの解決策。それを必要とする者は、それを妥当性検査/浄化または修正することができます。 –

-1

正常に動作しています。

作業DEMO。

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

出典

2016-10-26 17:08:17 paolobasso

そして、このソリューションはdbにどのように保存されますか？ – MCMXCII

これらのものを保存するには、PHPページへのajax呼び出しを行う必要があります.GETやPOSTを使って変数を呼び出すと、PHPページに保存することができます。 – paolobasso

PHP - 現在の地図の場所を取得し、ajaxとphpを使用してデータベースに詳細を挿入する

答えて

関連する問題