OpenLayers Format JSON est de retour Vide responseText Chaîne

Question

Après une semaine d'affichage sur le forum OpenLayers et ne pas recevoir de réponses à mes questions, j'ai décidé de regarder ici. J'ai googlé et googlé et googlé et même trouvé un merveilleux tutoriel sur ce sujet, en espagnol, mais si bien écrit que Google traduction était capable de le traduire parfaitement.

gisandchips.org/2010/05/04/openlayers-y-panoramio/

J'ai donc suivi ce tutoriel et maintenant je suis en train d'accéder à l'API de données Panoramio pour interroger les photos et les afficher sur ma carte . Cependant, mon code échoue à la ligne:

var panoramio = json.read (response.responseText);

Selon Firebug et alerte (response.responseText), mon responseText est une chaîne vide ...

Dans Firebug je l'URL GET http://localhost/cgi-bin/proxy.cgi?url=http%3A%2F%2Fwww.panoramio.com%2Fmap%2Fget_panoramas.php%3Forder%3Dpopularity%26set%3Dfull%26from%3D0%26to%3D40%26minx%3D-20037508.3392%26miny%3D-20037508.3392%26maxx%3D20037508.3392%26maxy%3D20037508.3392%26size%3Dthumbnail

cela me montre JSON valide. Et je sais que mon objet de réponse n'est pas nul parce que l'alerte (réponse) montre qu'il obtient un [objet XMLHttpRequest]

Honnêtement, je suis à court d'idées. Avant d'essayer d'analyser JSON, j'essayais d'analyser XML et n'avais absolument aucune chance. J'aime vraiment l'idée d'extraire des données RSS et API sur ma carte. Ci-dessous je joins mon code, je vous remercie tous les commentaires que vous pouvez offrir :)

Merci,

elshae

var map, popup, selectControl, selectedFeature; 
var vectorLayer, panoramio_style; 

Ext.onReady(function() { 
    var options = { 
     controls: [new OpenLayers.Control.Navigation()], //Needed to use GeoExt controls such as the zoomslider 
     maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), 
     units: 'm', 
     allOverlays: false 
    } 

    this.map = new OpenLayers.Map(options); 

    var ghyb = new OpenLayers.Layer.Google(
      "Google Hybrid", 
      {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} 
    ); 

    var gmap = new OpenLayers.Layer.Google(
      "Google Streets", // the default 
      {type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 20} 
    ); 

    var gphy = new OpenLayers.Layer.Google(
      "Google Physical", 
      {type: google.maps.MapTypeId.TERRAIN, numZoomLevels: 20} 
      // used to be {type: G_PHYSICAL_MAP} 
    ); 

    var osm = new OpenLayers.Layer.OSM(); 

    map.addLayers([osm, gphy, gmap, ghyb]); 

    OpenLayers.ProxyHost = "http://localhost/cgi-bin/proxy.cgi?url="; 

    var mapPanel = new GeoExt.MapPanel({ 
     title: "Map", 
     map: this.map, 
     center: new OpenLayers.LonLat(93.9, 29.53).transform(new OpenLayers.Projection("EPSG:4326"), 
       new OpenLayers.Projection("EPSG:900913")), 
     zoom: 2, 
     region: "center" 
    }); 

    //Obtain Bbox coords 
    var proj = new OpenLayers.Projection("EPSG:900913"); 
    var ext = mapPanel.map.getMaxExtent().transform(mapPanel.map.getProjectionObject(), proj); 
    var minx = ext.left; 
    var miny = ext.bottom; 
    var maxx = ext.right; 
    var maxy = ext.top; 
    alert(minx + " " + miny + " " + maxx + " " + maxy); 

    url = "http://www.panoramio.com/map/get_panoramas.php"; 
    var parameters = { 
     order: 'popularity', 
     set: 'full', 
     from: 0, 
     to: 40, 
     minx: minx, 
     miny: miny, 
     maxx: maxx, 
     maxy: maxy, 
     size: 'thumbnail' 
    } 

    new Ext.Panel({ 
     width: 1800, 
     height: 600, 
     layout: "border", 
     renderTo: document.body, 
     items: [mapPanel] 
    }); 

    OpenLayers.loadURL(url, parameters, this, showPhotos); 
    //alert(OpenLayers.Request.XMLHttpRequest); 

}); 

function showPhotos(response) { 

    var json = new OpenLayers.Format.JSON(); 
    var panoramio = json.read(response.responseText); //Something is wrong here!!! 
    var features = new Array(panoramio.photos.length); 
    for (var i = 0; i < panoramio.photos.length; i++) { 
     var upload_date = panoramio.photos[i].upload_date; 
     var owner_name = panoramio.photos[i].owner_name; 
     var photo_id = panoramio.photos[i].photo_id; 
     var longitude = panoramio.photos[i].longitude; 
     var latitude = panoramio.photos[i].latitude; 
     var pheight = panoramio.photos[i].height; 
     var pwidth = panoramio.photos[i].width; 
     var photo_title = panoramio.photos[i].photo_title; 
     var owner_url = panoramio.photos[i].owner_url; 
     var owner_id = panoramio.photos[i].owner_id; 
     var photo_file_url = panoramio.photos[i].photo_file_url; 
     var photo_url = panoramio.photos[i].photo_url; 

     var fpoint = new OpenLayers.Geometry.Point(longitude, latitude); 

     var attributes = { 
      'upload_date': upload_date, 
      'owner_name': owner_name, 
      'photo_id': photo_id, 
      'longitude': longitude, 
      'latitude': latitude, 
      'pheight': pheight, 
      'pwidth': pwidth, 
      'pheight': pheight, 
      'photo_title': photo_title, 
      'owner_url': owner_url, 
      'owner_id': owner_id, 
      'photo_file_url': photo_file_url, 
      'photo_url': photo_url 
     } 

     features[i] = new OpenLayers.Feature.Vector(fpoint, attributes); 

    }//Outside for loop 

    panoramio_style = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({ 
     pointRadius: 7, 
     fillColor: "red", 
     fillOpacity: 1, 
     strokeColor: "black", 
     externalGraphic: "panoramio-marker.png" 
    }, OpenLayers.Feature.Vector.style["default"])); 

    vectorLayer = new OpenLayers.Layer.Vector("Panoramio Photos", { 
     styleMap: panoramio_style 
    }); 

    vectorLayer.addFeatures(features); 

    this.map.addLayer(vectorLayer); 

    selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, 
      {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); 
    this.map.addControl(selectControl); 
    selectControl.activate(); 
}//End showPhotos 

// popups 
function onPopupClose(evt) { 
    selectControl.unselect(selectedFeature); 
} 

function onFeatureSelect(feature) { 
    selectedFeature = feature; 

    // HTML del PopUp 
    var html = "some HTML I have here"; 

    popup = new OpenLayers.Popup.FramedCloud("chicken", 
      feature.geometry.getBounds().getCenterLonLat(), 
      null, 
      html, 
      null, 
      true, 
      onPopupClose); 

    feature.popup = popup; 
    this.map.addPopup(popup); 
} 

function onFeatureUnselect(feature) { 
    this.map.removePopup(feature.popup); 
    feature.popup.destroy(); 
    feature.popup = null; 
} 

Answer 1

On dirait que vous avez heurté le Same Origin Policy. Vous ne pouvez pas faire de requêtes Ajax à des hôtes en dehors de votre domaine, sauf si vous utilisez JSONP ou une autre technique pour contourner la politique. Votre demande à www.panoramio.com est le problème, puisque je ne pense pas que vous êtes hébergé sur le www.panoramio.com :)

Vous pouvez vérifier si panoramio offre un service JSONP. Sinon, vous pouvez vérifier la pile suivante après débordement pour quelques solutions populaires pour travailler autour de la politique même origine (principalement JSONP, CORS et inverse méthodes Proxy):

• Ways to circumvent the same-origin policy

Et vide responseText est typique de la plupart des navigateurs quand ils bloquent la réponse de domaines tiers:

• Empty responseText from XMLHttpRequest