Question

我有一个html表单，我想嵌入谷歌地图，以便用户可以指出一些位置。提交表单后如何获取位置？

由于

Answer 1

虽然@zerkms给出了指向正确信息的指针，但这可能还不够。我创建了一个fiddle with a working example：来帮忙。基本部分是：

一个javaScript函数，它使用maps API来放下用户点击的标记（这是placeMarker）
提交按钮的javaScript单击处理程序，用于阻止正常表单提交并在隐藏的表单字段中记录标记的当前latlng
调用普通表单提交

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

希望这有帮助！

使用谷歌地图提交位置

1 个答案: