使用谷歌地图提交位置

Question

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

谢谢

Answer 1

虽然@zerkms给出了指向正确信息的指针,但这可能还不够.我用一个有效的例子创造了一个小提琴:帮助.基本部分是:

1. 一个javaScript函数,它使用maps API来放下用户单击的标记(这是placeMarker)
2. 提交按钮的javaScript单击处理程序,用于阻止正常表单提交并在隐藏表单字段中记录标记的当前latlng
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());
}

希望这可以帮助!