JQuery 地址自动完成 geocodeapi.io

Question

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

的信用卡

这是文档https://geocodeapi.io/documentation#autocomplete 自动完成工作，请求和答案来了，但我不知道如何格式化或阅读 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);

JQuery 地址自动完成 geocodeapi.io

JQuery adress autocomplete with geocodeapi.io

javascript

jquery

json

autocomplete