0

Google Maps API と Instagram API を使用して、人気のある画像マーカーを地図上に表示しています。ユーザーがいずれかを選択したら、その場所で撮影された画像のサムネイルを情報バブルに表示します。両方の API が別々に正常に動作していますが、それらを連携させる方法がわかりません。$.(each) ループから変数を取得するには、スコープの問題に直面する必要があることはわかっていますが、return ステートメントで各「ループ」を停止せずにそうする方法がわかりません。そして、私がそれを返すと、それはその時点でもはや配列ではないでしょうか? これが私のJavascriptです：

// get instagram info

function requestJSON(urlToRequest) {
        var headElement = document.getElementsByTagName("head")[0];         
        var newScriptTag = document.createElement('script');
        newScriptTag.setAttribute('type','text/javascript');
        newScriptTag.setAttribute('src',urlToRequest);
        headElement.appendChild(newScriptTag);
}

function callThis(responseData) {
    console.log(responseData);
    $.each( responseData.data, function( i, data ) {
        //console.log(item);
        var image = data.images.thumbnail.url;
        var location = data.location;
        if (location) {
            $( "<img/>" ).attr( "src", image ).appendTo( "#showPics" );
            // decimal will need to be rounded to .000000
            var lat = data.location.latitude;
            var lon = data.location.longitude;
            console.log(lat);
            console.log(lon);
        }
        else {
            return;
        }
            });
}

$(document).ready(function() {
    $('p a').on('click',function(e) {
        e.preventDefault();
        requestJSON('https://api.instagram.com/v1/media/popular?client_id=MYCLIENTID&callback=callThis');
    });
});



// get the map info

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(20, 0),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    //hardcoded map info that I want to be an array of locations i.e. lat and long
    var locations = [
          ['Somewhere a picture was taken',  33.86857, -117.8778],

    ];

    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
4

1 に答える 1

0

配列を持っているだけで、それをグローバルなように宣言することwindow.locationsArray = []ができます- (またはプレーンオブジェクトの配列である可能性があります) の直前に、 の$.each内部に入力し$.each、反復が完了した後locationsArray、GMap に含まれるポイントを次のようにプロットし始めます-

$.each(locationsArray, function(index, value) {

                          var aLatLong = *--*Have the Lat+Longitude*--*;
                          var aContent = "";
                          map_canvas.gmap('addMarker', { 
                          'position':aLatLong  
                           }).click(function() {
                           map_canvas.gmap('openInfoWindow', { content :'<p style="color:black;">'+value[2]+'</p><p style="color:black;"><b>'+'Views: '+aContent+'</b></p>'  }, this);
                                    });

                                     });
于 2013-04-22T03:42:25.207 に答える