Вопрос

После недели публикации на форуме OpenLayers и не получать ответы на мои вопросы, я решил посмотреть здесь. Я гугул и гугла и гугла и даже нашел чудесное руководство относительно этой темы, на испанском языке, но настолько хорошо написано, что Google Translate смог перевести его идеально.

Gisandchips.org/2010/05/04/Openlayers-y-panoramio/

Поэтому я последовал за этим руководством, и теперь я пытаюсь получить доступ к API данных Panoramio Data для запроса фотографий и отображать их на моей карте. Однако мой код не удается в строке:

var panoramio = json.read (Response.Responssetext);

По словам Firebug и Alert (Response.Responssetext), мой ответчик является пустой строкой ...

В Firebug у меня есть URL-адрес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

Это показывает мне действительный JSON. И я знаю, что мой объект ответа не нулевой, потому что Alert (Response) показывает, что он получает [объект xmlhttprequest

Честно говоря, я не знаю идеи. Прежде чем пытаться разобрать JSON, я пытался разобрать XML и не повезло. Мне очень нравится идея вытягивания данных RSS и API на мою карту. Ниже я прилагаю свой код, я ценю любые отзывы, которые вы можете предложить :)

Спасибо,

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;
}
Это было полезно?

Решение

Похоже, вы столкнулись в Та же политика происхождения. Отказ Вы не можете заставить Ajax запросы проводить за пределами вашего домена, если вы не используете Jsonp., или какая-то другая техника, чтобы обойти политику. Ваш запрос к www.panoramio.com проблема, так как я не думаю, что вы размещены на www.panoramio.com :)

Возможно, вы захотите проверить, предлагают ли Panoramio Service JSONP. В противном случае вы можете проверить следующие переполнения стека для нескольких популярных решений для работы вокруг той же политики происхождения (в основном методы JSONP, CORS и обратного прокси):

И пусто responseText Типично для большинства браузеров, когда они блокируют ответ от сторонних доменов:

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top