javascript - 在数据库中插入经纬度

标签 javascript php html google-maps

我目前正在编写一个代码,当用户输入位置时,他将获得纬度和经度,但是我需要将纬度和经度添加到数据库中。客户端代码正在运行,html 文件如下。

如何在 php 中将这些值传输到服务器端并将它们添加到数据库中。

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>maps</title>
     <style>
     #map_canvas { width:400px; height:450px; }
      </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?                   sensor=false">
     </script>
     <script type="text/javascript">

      var geocoder;
      var map;
      var lat;
      var lng;

       function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-30.070, -51.190);
var myOptions = {
    zoom: 9,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

    function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker;
        document.getElementById('lat').value = results[0].geometry.location.lat();
        document.getElementById('lng').value = results[0].geometry.location.lng();


    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
});
  }



   </script>
    </head>

    <body onload="initialize()">
    <form action="map2.php" method="get">

 <div id="map_canvas"></div>
 <div>
    <input id="address" type="textbox" value="">
    <input type="button" value="Localizar!" onclick="codeAddress()"><br>
    Latitude: <input type="text" id="lat"><br>
    Longitude: <input type="text" id="lng"><br>
 </div>

最佳答案

您可以使用 jquery 轻松完成此操作(无需页面加载或表单提交)-

if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker;
    document.getElementById('lat').value = results[0].geometry.location.lat();
    document.getElementById('lng').value = results[0].geometry.location.lng();


   // add this
    var latt=results[0].geometry.location.lat();
    var lngg=results[0].geometry.location.lng();
    $.ajax({
        url: "your-php-code-url-to-save-in-database",
        dataType: 'json',
        type: 'POST',
        data:{ lat: lat, lng: lngg }
        success: function(data)
        {                
           //check here whether inserted or not 
        }
   });


 }

并在 php 文件中:

  <?php
    // file name: your-php-code-url-to-save-in-database.php
   $lat=$_POST['lat'];
   $lng=$_POST['lng'];

   // write your insert query here to save $lat and $lng 


  ?>

要了解更多信息并下载 Jquery,请访问:http://jquery.com/download/

另一种方法是不使用Jquery(页面将重定向到map2.php):

<div id="map_canvas"></div>
<form action="map2.php" method="get">
   <div>
    <input id="address" type="textbox" value="">
    <input type="button" value="Localizar!" onclick="codeAddress()"><br>
    Latitude: <input name="lat" type="text" id="lat"><br>
    Longitude: <input name="lng" type="text" id="lng"><br>
   </div>
</form>

并在你的map2.php中写入-

 <?php

     // file name: map2.php

   $lat=$_GET['lat'];
   $lng=$_GET['lng'];

   // write your insert query here to save $lat and $lng 
   //get your mysql db connection ready

    $sql="insert into table_name (latitude, longitude) values('".$lat."','".$lng.")";
    $command=mysql_query($sql);

    // close databse connection  and everythig is done then redict to any page.
    //check your database table to see the inserted value

  ?>

在您的表单方法中,我建议使用 POST 而不是 GET 。如果您进行了此更改,那么在您的 map2.php 中只需更改 GETPOST。要了解使用 POST 的原因,请访问 Link 1Link 2

关于javascript - 在数据库中插入经纬度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18822091/

相关文章:

javascript - NodeJS - 本地范围已关闭( fatal error )

php使用ip地址显示持有页面

php - 从 PHP 中的 HTML 中获取摘录

html - 如何在悬停图像上显示 div?

javascript - 动态具体化模态

javascript - 当新的选择框添加到页面时,重新应用 jQuery 选择框样式

javascript - 所需的 angularJS 在指令中不起作用

javascript - 长表格滚动,但防止窗口滚动

php - 在 PHP 中使用 DLL?

html - 选择边距不起作用