使用 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.country

const objs = data.features.map( obj => ({

      label: obj.properties.street+','+obj.properties.Housnumber+','+ obj.properties.zip+','+ obj.properties.city

}));

response(objs);