使用 geocodeapi.io 自动完成 JQuery 地址

Question

我正在尝试使用 Jquery 构建一个用于地址自动完成的自动完成输入字段。我选择了 geocodeapi 作为源，它是免费的，而且我没有用于 google api 的信用卡。

我不知道如何格式化或读取 json 以便它在自动完成中显示地址，我变得未定义

$(function() {

    $("#customerAdress").autocomplete({

        source: function(request, response) {

            $.ajax({

                url: "https://app.geocodeapi.io/api/v1/autocomplete?apikey=mykey",

                dataType: "json",

                data: {

                    text: request.term

                },

                success: function(data) {

                    console.log("here comes data for test")

                    console.log(data)

                    var data = $.map(data, function(obj) {

                        return {

                            label: obj.Street+','+obj.Housnumber+','+ obj.zip+','+ obj.city, //here is the problem i think

                        };

                    });

                    response(data);

                }

            });

        },

        minLength: 1,

    });

});

最后，为什么可以使用图层函数将结果减少到特定状态

Answer 1

data是一个对象。你必须映射过来data.features，不是data。那么你将得到的每个对象将是： {         "type":"Feature",         "geometry":{            "type":"Point",            "coordinates":[               -73.976942,               40.760478            ]         },         "properties":{            "id":"way/118476502",            "gid":"openstreetmap:address:way/118476502",            "layer":"address",            "source":"openstreetmap",            "source_id":"way/118476502",            "name":"666 Fifth Avenue",            "housenumber":"666",            "street":"Fifth Avenue",            "accuracy":"point",            "country":"United States",            "country_gid":"whosonfirst:country:85633793",            "country_a":"USA",            "region":"New York",            "region_gid":"whosonfirst:region:85688543",            "region_a":"NY",            "county":"New York County",            "county_gid":"whosonfirst:county:102081863",            "county_a":"NE",            "locality":"New York",            "locality_gid":"whosonfirst:locality:85977539",            "locality_a":"NYC",            "borough":"Manhattan",            "borough_gid":"whosonfirst:borough:421205771",            "neighbourhood":"Midtown West",            "neighbourhood_gid":"whosonfirst:neighbourhood:85882233",            "continent":"North America",            "continent_gid":"whosonfirst:continent:102191575",            "label":"666 Fifth Avenue, Manhattan, New York, NY, USA",            "addendum":{               "osm":{                  "wikidata":"Q2818016",                  "wikipedia":"en:666 Fifth Avenue"               }            }         }      },所以你想要obj.properties.street等等obj.properties.countryconst objs = data.features.map( obj => ({      label: obj.properties.street+','+obj.properties.Housnumber+','+ obj.properties.zip+','+ obj.properties.city}));response(objs);