javascript - Jsonを使用してマーカーをGoogleマップに追加する| API

Question

Json Responseのデータを使用して、Googleマップにマーカーをプロットしようとしています。私は一日中StackOverflowで答えを検索しましたが、うまくいった解決策を見つけることができませんでした。

Lat＆Lngを抽出する方法と関係があると思いますが、指を置くことができません。以下は私のコードとJsonです。JsonはAPIからのものです。

私のコードのエラーはどこにありますか？

脚本

<script>   
  function initialize() {
              var myOptions = {
                  zoom: 4,
                  center: new google.maps.LatLng(34.397, 150.644),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };

              map = new google.maps.Map(document.getElementById("map"), myOptions);
              };

  function getLocations() {

      $.getJSON("URL", function (json) {

          $.each(json["resultsPage"]["results"]["event"], function(i, entry){
              addMarker(entry.location.lat,entry.location.lng);
          });
      });
  }

  function addMarker(lat,lng) {
          marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lng),
          map: map,
          });
          markersArray.push(marker);
  }
  </script>

Jsonの応答

次のコードを使用してJsonデータをリクエストするように指示されました。最後に疑問符を残すと、Jsonの先頭に疑問符があるため、http： //jsonlint.comで実行すると無効なメッセージが表示されます。それを取り除くことは問題を解決するように見えますが、私はそれが大丈夫かどうか100％確信していませんか？

    $.getJSON("http://api.songkick.com/api/3.0/events.json?location=clientip&apikey={your_api_key}&jsoncallback=?",
    function(data){
    // data is JSON response object
    });

最後に疑問符を残すと、Jsonの先頭に疑問符があるため、http： //jsonlint.comで実行すると無効なメッセージが表示されます。それを取り除くことは問題を解決するように見えますが、私はそれが大丈夫かどうか100％確信していませんか？

デバッガーでコードを表示すると、「SyntaxError：Unexpected token'：'」が表示されますが、この応答はAPIから送信されているため、何ができるかわかりません。

    {
    "resultsPage": {
    "status": "ok",
    "results": {
        "event": [
            {
                "type": "Concert",
                "status": "ok",
                "performance": [
                    {
                        "artist": {
                            "displayName": "Arcade Fire",
                            "uri": "http://www.songkick.com/artists/66758-arcade-fire?utm_source=16289&utm_medium=partner",
                            "identifier": [
                                {
                                    "mbid": "52074ba6-e495-4ef3-9bb4-0703888a9f68",
                                    "href": "http://api.songkick.com/api/3.0/artists/mbid:52074ba6-e495-4ef3-9bb4-0703888a9f68.json"
                                }
                            ],
                            "id": 66758
                        },
                        "billingIndex": 1,
                        "billing": "headline",
                        "displayName": "Arcade Fire",
                        "id": 29913729
                    },
                    {
                        "artist": {
                            "displayName": "Doody and Kami",
                            "uri": "http://www.songkick.com/artists/6334389-doody-and-kami?utm_source=16289&utm_medium=partner",
                            "identifier": [],
                            "id": 6334389
                        },
                        "billingIndex": 2,
                        "billing": "support",
                        "displayName": "Doody and Kami",
                        "id": 29913734
                    },
                    {
                        "artist": {
                            "displayName": "Leah Gordon",
                            "uri": "http://www.songkick.com/artists/6334394-leah-gordon?utm_source=16289&utm_medium=partner",
                            "identifier": [],
                            "id": 6334394
                        },
                        "billingIndex": 3,
                        "billing": "support",
                        "displayName": "Leah Gordon",
                        "id": 29913739
                    }
                ],
                "venue": {
                    "metroArea": {
                        "country": {
                            "displayName": "Canada"
                        },
                        "state": {
                            "displayName": "QC"
                        },
                        "displayName": "Montreal",
                        "uri": "http://www.songkick.com/metro_areas/27377-canada-montreal?utm_source=16289&utm_medium=partner",
                        "id": 27377
                    },
                    "lat": 45.5014288,
                    "displayName": "Phi Center",
                    "lng": -73.5564459,
                    "uri": "http://www.songkick.com/venues/1973969-phi-center?utm_source=16289&utm_medium=partner",
                    "id": 1973969
                },
                "popularity": 0,
                "location": {
                    "lat": 45.5014288,
                    "lng": -73.5564459,
                    "city": "Montreal, QC, Canada"
                },
                "start": {
                    "time": null,
                    "date": "2013-02-23",
                    "datetime": null
                },
                "displayName": "Arcade Fire with Doody and Kami and Leah Gordon at Phi Center (February 23, 2013)",
                "uri": "http://www.songkick.com/concerts/15215934-arcade-fire-at-phi-center?utm_source=16289&utm_medium=partner",
                "id": 15215934
            }
        ]
    },
    "perPage": 50,
    "page": 1,
    "totalEntries": 1
    }
    }

どんな助けでも大歓迎です。ありがとう

更新しました

score 6 · Accepted Answer

エラーを再現できました。

使用している API はコールバックをサポートしていません。プロキシを作成する必要があり、コードからプロキシをヒットする必要があり、プロキシは API を呼び出します。

ここにコードがあります

index.html

        function getLocations() {
            $.ajax({
                type: "GET",
                url: "http://172.20.6.114/ontrack/data.php?callback=?",
                dataType: "jsonp",
                success: function(json){
                    $.each(json["resultsPage"]["results"]["event"], function(i, entry){
                        PlotMarker(entry.location.lat, entry.location.lng);
                    });
                },
                error: function(err){
                    console.log(err);
                }
            });
        }

        function PlotMarker(lat, lon){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: gmap,
                draggable: false,
                animation: google.maps.Animation.DROP
            });
            markerLocations.push(marker);
        }

data.php のコード

<?
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"http://api.songkick.com/api/3.0/events.json?location=clientip&apikey={your_api_key}");

// receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec($ch);

curl_close($ch);

echo $_GET['callback'] . '(' . $server_output . ');';
?>

すると現れます。

score 2 · Accepted Answer

あなたjsonは無効です、"resultsPage:" {あるべきです、コロンは二重引用符の中にあります、あなたはjsonlint.comを使って"resultsPage" : {あなたを検証することができます。これは、コンソールで印刷している有効な（編集済み）を使用した例です。jsonjsonlat, lng

からの無効なjsonエラーjsonlint.com

ここに画像の説明を入力してください

更新：これを試すこともできます（チェック用）

function myCallBack(data){
    console.log(data);
}
<script type="text/javascript" src="http://api.songkick.com/api/3.0/events.json?location=clientip&apikey={your_api_key}&jsoncallback=myCallBack"></script>

score 0 · Accepted Answer

安全に削除できます&jsoncallback=?

これが私の見解です：

次のコードを使用する場合：

$.getJSON("http://api.songkick.com/api/3.0/events.json?location=clientip&apikey={your_api_key}&jsoncallback=?",
    function(data){
    // data is JSON response object
    });

次に、（おそらく）jsonコールバックは必要ありません。これは、コンマ（getJSON関数の2番目のパラメーター）の後にすでにjsonコールバックを使用しているためです。

したがって、URLからを削除して、次のようにすることができます。&jsoncallback=?http://api.songkick.com/api/3.0/events.json?location=clientip&apikey={your_api_key}

これが起こっていることです-

--JSONP（およびクロスドメインAJAXリクエスト）を容易にするためcallbackに、URLに関数を送信しています

-サーバーは次にを読み取り、関数呼び出しでラップされjsoncallback=XYZたデータを返します XYZ

XYZ--JavaScriptで次のように関数を定義できるようにします。

function XYZ(jsonDATA) {
    // ... And do things Here. JSONP is cool !    
}

-しかし、すでに関数へのコールバックが機能しているgetJSONので、は必要ありません。&jsoncallback=somethingしたがって、それを削除できます。

PShttp://api.songkick.com/api/3.0/events.json?location=clientip&apikey={your_api_key}&jsoncallback=MyFunction ：上記の証拠として、ブラウザでURLを押してみると、次の応答が1行で表示されます。

MyFunction({
    "resultsPage": {
        "status": "error",
        "error": {
            "message": "Invalid or missing apikey"
        }
    }
})

更新：
コメント内のJavaScriptエラーに対処するために-
応答は有効ですが、応答をコードJSONとして使用していますが、これは無効ですJavaScript

次のようにすると、有効なJavaScriptコードになります。

var myData = {
    "resultsPage": {
        "status": "error",
        "error": {
            "message": "Invalid or missing apikey"
        }
    }
}

しかし、私のポイントは、なぜこのJSONデータでコンソールエラーをチェックしているのですか？コンソールはJavaScript

javascript - Jsonを使用してマーカーをGoogleマップに追加する| API

脚本

Jsonの応答

更新しました

3 に答える 3

Related

Reference