6

これはおそらく非常に基本的なものですが、Google Places API をテストしようとしています。私はドキュメントを読み、それらが提供するいくつかの例を使用しています。JQuery の getJSON 関数を使用して非同期で外部の JSON ファイルにアクセスできたので、これを使用しようとしています。そのため、Google Places クエリの JSON 結果を取得するための良い方法かもしれないと考えました。これは私が使用しようとしているコードです:

<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 Kent Street, Sydney NSW, Australia Upper Level, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia 107 George Street, The Rocks NSW, Australia 483 George Street, Sydney NSW, Australia

つまり、機能します。getJSON 関数は JSON スクリプトを適切に解析していませんか?

4

3 に答える 3

6

Google Maps JavaScript API v3のPlaces Libraryを使用することをお勧めします。

使用方法のデモとドキュメントは、こちらでご覧いただけます。

于 2012-07-25T04:03:31.680 に答える
2

わかりました、私は多かれ少なかれそれを理解しました。getJSON 関数が JSON 解析済みデータを返すようにするために何をする必要があるかを理解しました。「callback=?」を追加する必要があります。クエリ文字列に。

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

ただし、問題は、コンソールに次のようなエラーが表示されることです。

SyntaxError: invalid label
[Break On This Error]   

"html_attributions" : [

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

JSONLint で応答を確認し、形式が有効であるため、これは奇妙です。また、ローカル ファイルから読み取られた場合も、同じ応答が機能します。

于 2012-07-28T21:35:32.957 に答える
0

以下のコードを試してください

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

Cross Domain 呼び出しであるため、Json コールバックとして作成する必要があります。

于 2013-10-23T10:57:49.493 に答える