Question

我有一个选择性输入#location，用户输入其位置，并显示google geocoding api中的下拉选项。

效果很好，但现在我想要的是在用户选择其中一个建议位置时填写另一个输入#latitude。

我部分能够使用此代码执行此操作：

$('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                }
            });
        }

    });

    $('#location').on('change', function () {
        var test = $('#location').selectize()[0].selectize.getValue();
        $('#latitude').val(test);
    });

我的问题是这段代码用#latitude填充'formatted_address'输入但不填充纬度，正如您在加载选项返回的json中看到的那样是在几何＆gt;下;位置＆gt; LAT。

返回的json样本在这里：

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "French Polynesia",
               "short_name" : "PF",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "French Polynesia",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -7.8955619,
                  "lng" : -138.6091323
               },
               "southwest" : {
                  "lat" : -23.9062409,
                  "lng" : -153.9919066
               }
            },
            "location" : {
               "lat" : -17.679742,
               "lng" : -149.406843
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -17.4943169,
                  "lng" : -149.1247993
               },
               "southwest" : {
                  "lat" : -17.8803223,
                  "lng" : -149.6211207
               }
            }
         },
         "place_id" : "ChIJTddtfNB1GHQREVfDCXp6wJs",
         "types" : [ "country", "political" ]
      }
   ],
   "status" : "OK"
}

编辑：带有github api的jsfiddle，我不知道如何使用谷歌地图api创建一个，因为你需要一个我不想分享的密钥：）

Answer 1

由于@Comte评论，我设法完成了它，这是解决方案

$('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                }

            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
        }

    });

selectize.js远程填充其他输入

1 个答案: