2012-04-19 91 views
4

我有一个HTML表单,我想嵌入谷歌地图,以便用户可以指向某个位置。提交表单后,我如何获取位置?用谷歌地图提交位置

感谢

+0

你把它放到隐藏的领域 – zerkms 2012-04-19 11:20:54

回答

6

虽然@zerkms了一个指向正确的信息,这可能是不够的。我创建了一个fiddle with a working example:帮助。基本配件有:

    使用地图API放下一个标记
  1. JavaScript函数在用户点击(这是placeMarker)
  2. 防止
  3. 提交按钮一个javaScript单击处理正常的表单提交并记录标记的当前经纬度信息在隐藏的表单字段
  4. 正常形态的调用提交

这里是placeMarker代码:

function placeMarker(location) { 
    if (marker) { 
     marker.setPosition(location); 
    } else { 
     marker = new google.maps.Marker({ 
      position: location, 
      map: mapInstance 
     }); 
    } 
} 

这里是用于处理jQuery代码提交:

$("#submitbutton").on("click", function(e) { 
    // Prevent normal submit action 
    e.preventDefault(); 
    // Collect current latlng of marker and put in hidden form field 
    if (marker) { 
     $("#latlngfield").val(marker.getPosition().toString()); 
    } else { 
     $("#latlngfield").val("not entered"); 
    } 
    // Show results for debugging 
    submitAction(); 
    // Uncomment this for production and remove submitAction() call 
    // $("#dataform").submit(); 
}); 

这是我使用的表格:

<form id="dataform"> 
    <fieldset> 
     <legend>Form Information</legend>  
      <label for="firstnamefield">First Name</label> 
      <input type="text" name="firstname" id="firstnamefield"><br> 
      <label for="lastnamefield">Last Name</label> 
      <input type="text" name="lastname" id="lastnamefield"><br> 
      <input type="reset" name="reset" value="Clear"> 
      <input type="submit" name="submit" id="submitbutton" value="Submit Data"> 
      <input type="hidden" name="latlng" id="latlngfield"> 
    </fieldset> 
</form> 

在生产中是不需要的submitAction,我只是想展示一下发生的值:

function submitAction() { 
    alert("Value of firstname is " + $("#firstnamefield").val()); 
    alert("Value of lastname is " + $("#lastnamefield").val()); 
    alert("Value of latlng is " + $("#latlngfield").val()); 
} 

希望这有助于!

+0

这样做的工作!坦克很多。 – sid606 2012-04-19 20:44:43

+0

辉煌:D也谢谢 – 2012-04-30 03:39:31