設置爲輸入地圖動態無功標記

Question

我有以下功能：

$(".mijn_veld").change(function() { 
    $.getJSON('https://url.com/index.php?action=pslist&zip='+$(".mijn_veld").val()+'&country=NL', function(result){ 
     $.each(result.data, function(i, field){ 
      $(".listings").append(this.name + "<br> "); 
     }); 
    }); 
}); 

這完美的作品。我想用這個功能是在我的Google地圖上添加標記。讓這個功能說我得到以下JSON的回覆：

{"status":0,"data":[{"spid":"NL-351202","name":"In 't vosje","add":"Nobelstraat 141","zip":"3512EM","city":"UTRECHT","country":"NL","lon":"5.1246600000","lat":"52.0929748000"},{"spid":"NL-358102","name":"Vivant Verheijen","add":"Burg Reigerstraat 54","zip":"3581KV","city":"UTRECHT","country":"NL","lon":"5.1358400000","lat":"52.0895721000"},{"spid":"NL-351175","name":"Parcelstation deBuren H.Catharijne","add":"Catharijnesingel 11-PS","zip":"3511GB","city":"UTRECHT","country":"NL","lon":"5.1115500000","lat":"52.0922582000"},{"spid":"NL-351403","name":"Vivant De Molen","add":"Adelaarstraat 32","zip":"3514CG","city":"UTRECHT","country":"NL","lon":"5.1158800000","lat":"52.0993884000"},{"spid":"NL-358303","name":"Qualitours","add":"Adr. Van Ostadelaan 41","zip":"3583AA","city":"UTRECHT","country":"NL","lon":"5.1396700000","lat":"52.0832667000"},{"spid":"NL-353103","name":"Ina Ugas 2","add":"Damstraat 64","zip":"3531BW","city":"UTRECHT","country":"NL","lon":"5.0000","lat":"52.0922908000"},{"spid":"NL-352203","name":"Cigars N More Utrecht","add":"Rijnlaan 12","zip":"3522BN","city":"UTRECHT","country":"NL","lon":"5.1145300000","lat":"52.0769769000"},{"spid":"NL-357101","name":"Foto Ben Romp","add":"Troosterhof 1","zip":"3571NC","city":"UTRECHT","country":"NL","lon":"5.1356800000","lat":"52.1064315000"},{"spid":"NL-353203","name":"Buurtwinkel Nieuw England","add":"Vleutenseweg 355","zip":"3532HH","city":"UTRECHT","country":"NL","lon":"5.0961200000","lat":"52.0937046000"},{"spid":"NL-355102","name":"Vivant De Plantage","add":"Amsterdamsestraatweg 279","zip":"3551CE","city":"UTRECHT","country":"NL","lon":"5.0989600000","lat":"52.1015290000"},{"spid":"NL-352301","name":"Boek en Kantoor Robman","add":"Smaragdplein 224","zip":"3523EH","city":"UTRECHT","country":"NL","lon":"5.1248600000","lat":"52.0721031000"},{"spid":"NL-356202","name":"The Cartridgers Overvecht","add":"Zamenhofdreef 43","zip":"3562JT","city":"UTRECHT","country":"NL","lon":"5.1120700000","lat":"52.1144018000"},{"spid":"NL-355301","name":"Drogisterij de Kamil","add":"Amsterdamsestraatweg 524","zip":"3553EN","city":"UTRECHT","country":"NL","lon":"5.0844700000","lat":"52.1094875000"},{"spid":"NL-352875","name":"Parcelstation deBuren Utrecht","add":"Papendorpseweg 95-PS","zip":"3528BJ","city":"UTRECHT","country":"NL","lon":"5.0881500000","lat":"52.0629634000"},{"spid":"NL-354203","name":"DHL Parcel Hoofdkantoor","add":"Reactorweg 25","zip":"3542AD","city":"Utrecht","country":"NL","lon":"5.0640800000","lat":"52.1049812000"},{"spid":"NL-354251","name":"DHL Parcelstation Lage weide","add":"Reactorweg 25-PS","zip":"3542AD","city":"UTRECHT","country":"NL","lon":"5.0640800000","lat":"52.1049812000"},{"spid":"NL-354244","name":"Test shop","add":"Reactorweg 25","zip":"3542AD","city":"Utrecht","country":"NL","lon":"5.0640800000","lat":"52.1049812000"},{"spid":"NL-373104","name":"CIGO De Bilt","add":"Hessenweg 162","zip":"3731JN","city":"DE BILT","country":"NL","lon":"5.1817900000","lat":"52.1103054000"},{"spid":"NL-354301","name":"G&W Gezondheidswinkel De Weegschaal","add":"Ella Fitzgeraldplein 34","zip":"3543EP","city":"UTRECHT","country":"NL","lon":"5.0463800000","lat":"52.1015022000"},{"spid":"NL-354202","name":"DHL Parcel Utrecht","add":"Rutherfordweg 1","zip":"3542CN","city":"UTRECHT","country":"NL","lon":"5.0561100000","lat":"52.1204578000"}]} 

我現在想的是把這個數據到VAR所以我的腳本會在我的地圖讓標記。例子是：（但請注意：我不希望它像靜現在是，每一次都會有與其他的getJSON郵政編碼填寫，就必須更新此VAR）

var stores = { 
    "type": "FeatureCollection", 
    "features": [ 
     { 
      "type": "Feature", 
      "geometry": { 
       "type": "Point", 
       "coordinates": [5.140439, 51.686608] 
      }, 
      "properties": { 
       "spid": "NL3700-03", 
       "name": "Test Parcel 1", 
       "add": "Teststreet 1", 
       "zip": "3500RR", 
       "city": "utrecht", 
       "country": "NL", 
       "phone": "032434234", 
       "oh": "Ma: 12:00 tot 15:00" 
      } 
     }, 
     { 
      "type": "Feature", 
      "geometry": { 
       "type": "Point", 
       "coordinates": [5.133729,51.681425] 
      }, 
      "properties": { 
       "phoneFormatted": "(202) 507-8357", 
       "phone": "2025078357", 
       "add": "2221 I St NW", 
       "city": "Washington DC", 
       "country": "United States", 
       "crossStreet": "at 22nd St NW", 
       "postalCode": "20037", 
       "state": "D.C." 
      } 
     } 
    ] 
}; 

我的問題：我該如何做到這一點？我想確保名稱來自JSON輸出的值將位於VAR STORES的「名稱」中。這是每個商店都有。

Answer 1

您可以將JSON裝載到一個對象使用你的第一個功能

var places = {}; 

$(".mijn_veld").change(function() { 
    $.getJSON('https://url.com/index.php?action=pslist&zip='+$(".mijn_veld").val()+'&country=NL', function(result) { 
     places = result; 
    }); 
}); 

然後，只需通過結果循環中調用places，將它們添加到您自己的數據結構，當您去。在示例中，我手動設置了位置，但出於您的目的，您可以從該服務器加載它。

var places = { 
    "status":0, 
    "data":[ 
     { 
     "spid":"NL-351202", 
     "name":"In 't vosje", 
     "add":"Nobelstraat 141", 
     "zip":"3512EM", 
     "city":"UTRECHT", 
     "country":"NL", 
     "lon":"5.1246600000", 
     "lat":"52.0929748000" 
     }, 
     { 
     "spid":"NL-358102", 
     "name":"Vivant Verheijen", 
     "add":"Burg Reigerstraat 54", 
     "zip":"3581KV", 
     "city":"UTRECHT", 
     "country":"NL", 
     "lon":"5.1358400000", 
     "lat":"52.0895721000" 
     }, 
     { 
     "spid":"NL-351175", 
     "name":"Parcelstation deBuren H.Catharijne", 
     "add":"Catharijnesingel 11-PS", 
     "zip":"3511GB", 
     "city":"UTRECHT", 
     "country":"NL", 
     "lon":"5.1115500000", 
     "lat":"52.0922582000" 
     } 
    ] 
}; 

var stores = { 
    "type": "FeatureCollection", 
    "features": [] 
}; 

for (var i = 0; i < places.data.length; i++) { 
    var place = places.data[i]; 

    stores.features.push({ 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [place.lat, place.lon] 
     }, 
     properties: { 
     "spid": place.spid, 
     "name": place.name, 
      "add": place.add, 
      "zip": place.zip, 
      "city": place.city, 
      "country": place.country, 
     } 
    }); 
} 

console.log(stores);