亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

天涯盡頭無女友 2023-07-06 16:52:07
我正在嘗試使用 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,? ? });});最后,為什么可以使用圖層函數將結果減少到特定狀態
查看完整描述

1 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

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);


查看完整回答
反對 回復 2023-07-06
  • 1 回答
  • 0 關注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號