Tentativo di utilizzare l'API di Google Places con la funzione getJSON di JQuery

Questo è probabilmente molto semplice, ma sto provando a testare l'API di Google Places. Sto esaminando la documentazione e utilizzando alcuni degli esempi forniti. Sto provando a utilizzare la funzione JQuery getJSON perché sono riuscito a utilizzarlo correttamente per accedere ai file JSON esterni in modo asincrono, quindi ho pensato che potesse essere un buon approccio per ottenere i risultati JSON della query di Google Places. Questo è il codice che sto cercando di utilizzare:Tentativo di utilizzare l'API di Google Places con la funzione getJSON di JQuery

<body> 
<div id="message"></div> 
<script type="text/javascript"> 

    var requestURL = 'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key'; 
    $(document).ready(function() { 
     $.getJSON(requestURL, function (data) { 

      for (i = 0; i < data.results.length; i++) { 
       myAddress[i] = data.results[i].formatted_address; 
       document.getElementById("message").innerHTML += myAddress[i] + "<br>"; 
       console.log(myAddress[i]); 
      } 

     }); 
    }); 


</script> 

</body>

Secondo la documentazione della risposta JSON risultante alla query dovrebbe essere la seguente:

{ 
    "html_attributions" : [ 
     "Listings by \u003ca href=\"http://www.yellowpages.com.au/\"\u003eYellow Pages\u003c/a\u003e" 
    ], 
    "results" : [ 
     { 
     "formatted_address" : "529 Kent Street, Sydney NSW, Australia", 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8750460, 
       "lng" : 151.2052720 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", 
     "id" : "827f1ac561d72ec25897df088199315f7cbbc8ed", 
     "name" : "Tetsuya's", 
     "rating" : 4.30, 
     "reference" : "CnRmAAAAmmm3dlSVT3E7rIvwQ0lHBA4sayvxWEc4nZaXSSjRtfKRGoYnfr3d5AvQGk4e0u3oOErXsIJwtd3Wck1Onyw6pCzr8swW4E7dZ6wP4dV6AsXPvodwdVyqHgyGE_K8DqSp5McW_nFcci_-1jXb5Phv-RIQTzv5BjIGS0ufgTslfC6dqBoU7tw8NKUDHg28bPJlL0vGVWVgbTg", 
     "types" : [ "restaurant", "food", "establishment" ] 
     }, 
     { 
     "formatted_address" : "Upper Level, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia", 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8583790, 
       "lng" : 151.2100270 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png", 
     "id" : "f181b872b9bc680c8966df3e5770ae9839115440", 
     "name" : "Quay", 
     "rating" : 4.10, 
     "reference" : "CnRiAAAADmPDOkn3znv_fX78Ma6X5_t7caEGNdSWnpwMIdDNZkLpVKPnQJXP1ghlySO-ixqs28UtDmJaOlCHn18pxpj7UQjRzR4Kmye6Gijoqoox9bpkaCAJatbJGZEIIUwRbTNIE_L2jGo5BDqiosqU2F5QdBIQbXKrvfQuo6rmu8285j7bDBoUrGrN4r6XQ-PVm260PFt5kwc3EfY", 
     "types" : [ "cafe", "bar", "restaurant", "food", "establishment" ] 
     }, 
     { 
     "formatted_address" : "107 George Street, The Rocks NSW, Australia", 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8597750, 
       "lng" : 151.2085920 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", 
     "id" : "7beacea28938ae42bcac04faf79a607bf84409e6", 
     "name" : "Rockpool", 
     "rating" : 4.0, 
     "reference" : "CnRlAAAAVK4Ek78r9yHV56I-zbaTxo9YiroCbTlel-ZRj2i6yGAkLwNMm_flMhCl3j8ZHN-jJyG1TvKqBBnKQS2z4Tceu-1kZupZ1HSo5JWRBKd7qt2vKgT8VauiEBQL-zJiKVzSy5rFfilKDLSiLusmdi88ThIQqqj6hKHn5awdj6C4f59ifRoUg67KlbpuGuuW7S1tAH_EyBl6KE4", 
     "types" : [ "restaurant", "food", "establishment" ] 
     }, 
     { 
     "formatted_address" : "483 George Street, Sydney NSW, Australia", 
     "events" : [ 
      { 
       "event_id" : "7lH_gK1GphU", 
       "summary" : "Google Maps Developer Meetup: Rockin' out with the Places API", 
       "url" : "https://developers.google.com/places" 
      } 
      ], 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8731950, 
       "lng" : 151.2063380 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/civic_building-71.png", 
     "id" : "017049cb4e82412aaf0efbde890e82b7f2987c16", 
     "name" : "Chinatown Sydney", 
     "rating" : 4.0, 
     "reference" : "CnRuAAAAsLNeRQtKD7TEUXWG6gYD7ByOVKjQE61GSyeGZrX-pOPVps2BaLBlH0zBHlrVU9DKhsuXra075loWmZUCbczKDPdCaP9FVJXB2NsZ1q7188pqRFik58S9Z1lcWjyVoVqvdUUt9bDMLqxVT4ENmolbgBIQ9Wy0sgDy0BgWyg5kfPMHCxoUOvmhfKC-lTefXGgnsRqEQwn8M0I", 
     "types" : [ 
      "city_hall", 
      "park", 
      "restaurant", 
      "doctor", 
      "train_station", 
      "local_government_office", 
      "food", 
      "health", 
      "establishment" 
     ] 
     } 
    ], 
    "status" : "OK" 
}

Se copio questo script JSON e salvarlo a un file, posso accedervi e visualizza il seguente risultato sul browser:

529 Kent Street, Sydney NSW, Australia livello superiore, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia 107 George Via, T he Rocks NSW, Australia 483 George Street, Sydney NSW, Australia

Il che significa che funziona. La funzione getJSON non analizza correttamente lo script JSON?

fonte

2012-07-25 rocklandcitizen

Vedere questa risposta http://stackoverflow.com/questions/5564830/parsing- google-geo-api-reverse-geocoding-with-jquery/39276042 # answer-39276042 –

Si consiglia di utilizzare Places Library dello Google Maps JavaScript API v3.

È possibile trovare demo e documentazione su come utilizzarlo here.

fonte

2012-07-25 04:03:31

Potrebbe funzionare, ma sono molto curioso del motivo per cui questo codice non funziona con script JSON remoti. Per quanto ho potuto vedere, Google non mostra davvero esempi degni di come utilizzare il servizio Google Places utilizzando AJAX. Come fanno le persone normalmente a farlo? Grazie per la risposta, a proposito. – rocklandcitizen

Ok, l'ho capito più o meno. Ho capito cosa è necessario fare in modo che la funzione getJSON restituisca i dati analizzati JSON. Devi aggiungere "callback =?" alla stringa di query.

'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key="myKey"&callback=?';

Tuttavia, ora il problema è che ora ottengo un errore nella mia console dicendo che:

SyntaxError: invalid label 
[Break On This Error] 

"html_attributions" : [ 

json?l...0080533 (line 2, col 3)

che è strano perché ho controllato la risposta in JSONLint e il formato è valido. Inoltre, la stessa risposta funziona se viene letta da un file locale.

fonte

2012-07-28 21:35:32 rocklandcitizen

'callback' è necessario per trasformare un output JSON in un output JSONP. Solo JSONP può essere utilizzato in JQM. –

Si prega di provare sottostante Codice

 <body> 
    <div id="message"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $.ajax({ 
     type: 'GET', 
     url: 'https://maps.googleapis.com/maps/api/place/searc/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key';', 
     async: false, 
     jsonpCallback: 'jsonCallback', 
     contentType: "application/json", 
     dataType: 'jsonp', 
     success: function (data) { 
      for (i = 0; i < data.results.length; i++) { 
      myAddress[i] = data.results[i].formatted_address; 
      document.getElementById("message").innerHTML += myAddress[i] + "<br>"; 
      console.log(myAddress[i]); 
     }; 
     }, 
     error: function (e) { 
      console.log(e.message); 
     } 
    }); 
}); 
</script> 
</body>

è necessario rendere il più JSON richiamata dal momento che è chiamata tra domini

fonte

2013-10-23 10:57:49

il tuo link non è corretto !!! ci avevi provato? –

Tentativo di utilizzare l'API di Google Places con la funzione getJSON di JQuery

risposta

Problemi correlati