Question

我试图在谷歌地图API上发布一个包含额外数组边界的表单，我查看了其他问题，隐藏表单主要与表单提交中的钩子一起使用：

How to add additional fields to form before submit?

所以这就是我一直在尝试做的事情 - 虽然我不确定为什么默认值会被发送而不是我设置的那个？

的javascript：

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('city'));
var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('destination'));
var directionsService = new google.maps.DirectionsService();
var rboxer = new RouteBoxer();

$("#form").submit(function(e) {
var req = {
    origin: $('#city').val(),
    destination: $('#destination').val(),
    travelMode: google.maps.TravelMode.DRIVING
};
var boundArray = [];
directionsService.route(req, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var path = response.routes[0].overview_path;
        var boxes = rboxer.box(path, 30);
        for (var i = 0; i < boxes.length; i++) {
            boundArray.push(boxes[i].toUrlValue());
        }
        document.getElementById('bounds').setAttribute('value', JSON.stringify(boundArray));
        return true;
    }
});
});

HTML：

<input id="bounds" type="hidden" name="bounds"/>
<div class="form-group row">
<div class="col-lg-5">
    <button type="submit" value="Submit" id="subBtn" class="btn btn-lg btn-primary sub-btn">Confirm</button>
</div>
</div>

提前致谢，

丹

编辑：我已经改变了我的代码，所以现在我在POST请求中得到一些东西 - 一个空白数组？

$("#form").submit(function(e) {
var req = {
    origin: $('#city').val(),
    destination: $('#destination').val(),
    travelMode: google.maps.TravelMode.DRIVING
};
var boundArray = [];
directionsService.route(req, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var path = response.routes[0].overview_path;
        var boxes = rboxer.box(path, 30);
        for (var i = 0; i < boxes.length; i++) {
            boundArray.push(boxes[i].toUrlValue());
        }

    }
});
$('#bounds').val(JSON.stringify(boundArray));
return true;
});

Answer 1

谢谢，我似乎已经成功了：

function doAsync(callback) {
var req = {
    origin: $('#city').val(),
    destination: $('#destination').val(),
    travelMode: google.maps.TravelMode.DRIVING
};
var boundArray = [];
directionsService.route(req, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var path = response.routes[0].overview_path;
        var boxes = rboxer.box(path, 30);
        for (var i = 0; i < boxes.length; i++) {
            boundArray.push(boxes[i].toUrlValue());
        }
        $("#bounds").val(JSON.stringify(boundArray));
        callback();
    }
});

}

$("#form").submit(function(e) {
doAsync(function () {
    $('#form').submit();
    return true;
});
//return false;
});

Answer 2

directionsService.route正在进行异步调用。在实际提交表单之前，需要等待服务调用完成。我修改了一些您现有的代码。希望这对你有用..

var flag = false;

$("#form").submit(function(e) {
    var req = {
        origin: $('#city').val(),
        destination: $('#destination').val(),
        travelMode: google.maps.TravelMode.DRIVING
    };
    if(!flag)
    directionsService.route(req, function (response, status) {
        var boundArray = [];
        if (status == google.maps.DirectionsStatus.OK) {
            var path = response.routes[0].overview_path;
            var boxes = rboxer.box(path, 30);
            for (var i = 0; i < boxes.length; i++) {
                boundArray.push(boxes[i].toUrlValue());
            }
        }

        $('#bounds').val(JSON.stringify(boundArray));
        flag = true;
        $("#form").submit();
    });

    }else{
        flag = false;
        return true;
    }

    return false;
});

数组不会与我表单的其余部分一起发布

2 个答案: