4

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

谢谢

4

1 回答 1

6

尽管@zerkms 给出了正确信息的指针,但这可能还不够。我用一个工作示例创建了一个小提琴:来提供帮助。基本部分是:

  1. 一个 javaScript 函数,它使用 maps API 在用户点击的地方放置一个标记(这是 placeMarker)
  2. 提交按钮的 JavaScript 单击处理程序,可防止正常的表单提交并将标记的当前纬度记录在隐藏的表单字段中
  3. 调用普通表单提交

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

希望这可以帮助!

于 2012-04-19T13:29:52.290 回答