0

这是我正在使用的脚本：http: //jsfiddle.net/spadez/Jfdbz/19/

基本上它在按下提交按钮时通过地理编码工作。但是，如果从自动建议链接中选择了一个选项，它将在用户按下按钮之前对结果进行地理编码。在这种情况下，脚本知道它已经有了答案，并且不会重新对结果进行地理编码。

目前，它通过将结果存储在此变量中来工作：

lastQuery

然后它会检查以查看以下内容：

if (!query || query === lastQuery)

但是，为了逻辑起见，并且为了简化集成到此代码中的代码，我认为最好执行以下操作：

  • 在点击提交按钮时检查 lng lat 字段是否为空，如果是，则进行地理编码然后提交。
  • 如果位置字段的内容发生更改，则从 lng lat 字段中删除坐标。

基本上这种方式是有效的，所以如果位置已经过地理编码并且在提交时没有改变，那么我们就有结果并且不需要重新地理编码，但是在提交之前对位置框的任何更改都会删除地理编码的值，然后地理编码器知道我们需要提交时重新编码位置值。

我被困在如何整合这个逻辑上，此外，凭借我对 javascript 的基本知识，我不确定这是否真的是一个明智的解决方案。

4

1 回答 1

1

这个小提琴可能会给你一些想法。

一些主要区别是：

将 google.maps.Geocoder API 变成基于 Promise 的 API

Promise（另见Deferred）通常比回调更好用。

// Turn google.maps.Geocoder into promise API
function googleGeocode(query) {
    var geocoder = new google.maps.Geocoder(),
        dfd = $.Deferred();

    geocoder.geocode({
        address: query
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            console.log("googleGeocode", "success", query, results);
            dfd.resolve(query, results);
        } else {
            console.log("googleGeocode", "failure", query);
            dfd.reject(query);
        }
    });

    return dfd.promise();
}

然后我们可以使用可能的地理编码方法：

// Only geocodes if the query has changed since last time.
function geocode() {
    var geokeyword = $.trim($("#geokeyword").val()),
        loc = $.trim($("#loc").val()),
        // always use geokeyword in preference to loc (if provided)
        query = geokeyword || loc,
        dfd;

    // check for changes
    if (history.query === query) {
        console.log("No changes");
        dfd = $.Deferred();
        // resolve with results already in history
        dfd.resolve(history.query, history.results);
        return dfd.promise();
    }

    return googleGeocode(query);
}

使用历史对象

（此处显示单个对象，但您的历史记录可能是所有先前地理编码结果的数组或地图）

var history = {
    lat: null,
    long: null,
    query: null,
    results: null
},

在请求地理编码时检查（见上文），并在成功执行地理编码时更新（见下文 - 成功回调是传递给的第一个回调then()，错误回调是第二个）：

function processLocation(history, submit) {
    // only passing submit==false will prevent auto-submission
    submit = (false !== submit);

    geocode().then(function (query, results) {
        var form = $("#geocode_form"),
            lat = form.find("#lat"),
            long = form.find("#lng"),
            location = results[0].geometry.location;

        console.log("processLocation", "success", query, results);

        lat.val(location.lat());
        long.val(location.lng());

        history.query = query;
        history.results = results;
        history.lat = lat.val();
        history.long = long.val();

        if (submit) {
            console.log("Submitting", lat.val(), long.val());
            form.submit();
        }
    }, function (query) {
        console.log("processLocation", "failure", query);
    });
}
于 2013-06-23T09:39:35.910 回答