2012-07-25 22 views
5

के साथ Google स्थल API का उपयोग करने का प्रयास करना शायद यह बहुत बुनियादी है लेकिन मैं Google स्थल API का परीक्षण करने का प्रयास कर रहा हूं। मैं प्रलेखन के माध्यम से जा रहा हूं और उनके द्वारा प्रदान किए गए कुछ उदाहरणों का उपयोग कर रहा हूं। मैं JQuery getJSON फ़ंक्शन का उपयोग करने का प्रयास कर रहा हूं क्योंकि मैं बाहरी JSON फ़ाइलों को इसके साथ असीमित रूप से एक्सेस करने के लिए सफलतापूर्वक इसका उपयोग करने में सक्षम हूं, इसलिए मैंने सोचा कि यह Google स्थल क्वेरी के JSON परिणाम प्राप्त करने का एक अच्छा तरीका हो सकता है।JQuery के getJSON फ़ंक्शन

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

प्रलेखन क्वेरी के लिए जिसके परिणामस्वरूप JSON प्रतिक्रिया के रूप में किया जाना चाहिए के अनुसार इस प्रकार है::

{ 
    "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" 
} 

मैं इस JSON स्क्रिप्ट को कॉपी करें और सहेजते हैं इस कोड मैं उपयोग करने के लिए कोशिश कर रहा हूँ है एक फाइल करने के लिए, मैं इसे उपयोग कर सकते हैं और यह ब्राउज़र पर निम्न परिणाम प्रदर्शित करता है:

529 केंट स्ट्रीट, सिडनी एनएसडब्ल्यू, ऑस्ट्रेलिया ऊपरी तल, प्रवासी पैसेंजर टर्मिनल/5 हिक्सन रोड, चट्टानों एनएसडब्ल्यू, ऑस्ट्रेलिया 107 जॉर्ज स्ट्रीट, टी वह रॉक्स एनएसडब्ल्यू, ऑस्ट्रेलिया 483 जॉर्ज स्ट्रीट, सिडनी एनएसडब्ल्यू, ऑस्ट्रेलिया

जिसका अर्थ है कि यह काम करता है। क्या GetJSON फ़ंक्शन JSON स्क्रिप्ट को सही तरीके से पार्स नहीं कर रहा है?

+0

है देखें आवश्यकता इस जवाब http://stackoverflow.com/questions/5564830/parsing- प्रयास करें google-geo-api-reverse-geocoding-with-jquery/39276042 # answer-39276042 –

उत्तर

6

मैं Google Maps JavaScript API v3 के Places Library का उपयोग करने की अनुशंसा करता हूं।

आप डेमो और इसका उपयोग कैसे करें here का दस्तावेज़ीकरण पा सकते हैं।

+0

यह काम कर सकता है, लेकिन मैं बहुत उत्सुक हूं कि यह कोड दूरस्थ JSON स्क्रिप्ट के साथ क्यों काम नहीं करेगा। जहां तक ​​मैं देख सकता था, Google वास्तव में AJAX का उपयोग करके अपनी Google स्थल सेवा का उपभोग करने के योग्य उदाहरण नहीं दिखाता है। आम तौर पर लोग इसे कैसे करते हैं? रास्ते से प्रतिक्रिया के लिए धन्यवाद। JSON आउटपुट को JSONP आउटपुट में बदलने के लिए – rocklandcitizen

2

ठीक है, मैंने इसे कम या ज्यादा समझ लिया। मुझे पता चला कि आपको क्या करने की ज़रूरत है ताकि getJSON फ़ंक्शन JSON पार्स किए गए डेटा को वापस कर सके। आपको "कॉलबैक =" जोड़ना होगा? क्वेरी स्ट्रिंग के लिए।

SyntaxError: invalid label 
[Break On This Error] 

"html_attributions" : [ 

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

कौन सा अजीब है क्योंकि मैं JSONLint में प्रतिक्रिया की जाँच की और प्रारूप मान्य है:

'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=?'; 

हालांकि, अब समस्या यह है कि मैं अब में कह रही है कि मेरे कंसोल में त्रुटि मिली है। साथ ही, यदि एक स्थानीय फ़ाइल से पढ़ा जाता है तो वही प्रतिक्रिया काम करती है।

+1

'कॉलबैक' की आवश्यकता है। जेक्यूएम में केवल JSONP का उपयोग किया जा सकता है। –

1

कृपया नीचे दिए गए कोड

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

आप Json कॉलबैक के रूप में यह सुनिश्चित करने के लिए है, क्योंकि यह क्रॉस-डोमेन कॉल

+0

आपका लिंक सही नहीं है !!! तुमने कोशिश की थी? –

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^