2012-04-19 87 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