将Googlemap经度和经度作为javascript传递给HTML表单

时间:2012-08-22 15:12:24

标签: php javascript html google-maps-api-3 google-geocoding-api

您好我正在使用GoogleMaps API v3,我正在尝试获取纬度和经度的变量,并将它们作为html变量放在隐藏的表单中,并将它们通过表单传递到php页面。纬度和经度在我的页面上打印出来作为跨度,但我不能让它们在表单中打印。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>

   <!-- google maps -->
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">        </script>

    <!-- jquery -->
   <script type="text/javascript" src="js/jquery.min.js"></script>

   <!-- jquery UI -->
   <script type="text/javascript" src="js/jquery-ui.min.js"></script>

   <!-- our javascript -->
   <script type="text/javascript" src="gmaps.js"></script>

   <link rel="stylesheet" type="text/css" href="style4.css" />


   </head>

   <body>

      <input id='gmaps-input-address' type='text'/>

    <div id='gmaps-error'></div>

    <div id='gmaps-canvas'></div>

      <br/>
      <br/>
    Latitude: <span id='gmaps-output-latitude'></span>
      <br/>
      Longitude: <span id='gmaps-output-longitude'></span>
      <br/>     

    <script type="text/javascript">

    function doSomething()
    {
    var lat = document.getElementById('#gmaps-output-latitude');
    lat_element.value = google_maps_api_variable;
    var lon = document.getElementById('#gmaps-output-longitude');
    lon_element.value = google_maps_api_variable;
    document.getElementById("lat").value=lat;
    document.getElementById("lon").value=lon;
    }
    </script>


   <form action="join.php" method="post" onSubmit="doSomething">

   <input type="hidden" name="lat" id="lat"/>
   <input type="hidden" name="lon" id="lon"/>

   <input type="submit" value="Confirm Address"/>
   </form>
   </body>


   </html>

在Googlemaps API中有一个javascript函数,它保存纬度和经度,如下所示:

function update_ui( address, latLng ) {
 $('#gmaps-input-address').autocomplete("close");
 $('#gmaps-input-address').val(address);
 $('#gmaps-output-latitude').html(latLng.lat());
 $('#gmaps-output-longitude').html(latLng.lng());
 }

我对Javascript非常环保并且非常感谢任何帮助,我已经搜索了其他问题,但我被困在这里。

2 个答案:

答案 0 :(得分:1)

只需在您已有的代码之后添加它(在表单提交为表单submittal buon的点击处理程序之前工作):

$('#lat').val($('#gmaps-output-latitude').html());
$('#lon').val($('#gmaps-output-longitude').html());

答案 1 :(得分:0)

gmaps.js是你的hs,它填充你的html文件中的span。这应该通过回调函数发生,我可能认为它是update_ui。此函数可能会在之后填充跨度,并且用于填充隐藏字段的脚本可能已经执行。因此,在回调函数调用之后放置用于填充隐藏字段的代码,或者可能在update_ui本身。

所以编辑你的update_ui函数并添加

$('#lat').val(latLng.lat());
$('#lon').val(latLng.lng());

函数体中的这些行结尾。