Question

此地图http://lastablaslift.es/explorador/正在通过csv2geojson插件加载本地CSV文件，以添加一些带弹出窗口的标记。

我们正在尝试整合一个URL端点，以便从mysql数据库而不是CSV中获取geoJSON。

此地图http://lastablaslift.es/explorador/map_test.php是相同的，但使用我们网址中的geoJSON。

似乎我们已经让URL返回格式正确的GeoJSON，但正如您所看到的，只有＆＃34;功能中的第一个对象＆＃34;数组正在map_test.php上呈现

我将两个geoJSON对象都记录到控制台，当我比较它们时，它们看起来和我一样。也没有报告相关的错误，所以我们的URL中的geoJSON有什么问题？

Answer 1

请参阅此JSFiddle 示例。我认为与function change() {}相关的问题是您放入$ .getJSON成功函数。试着把它放在外面。你的 map_jsonurl.js sholud看起来像这样，

(function() {
    var image = new Image();
    image.onload = function() {
        if (image.width > 0) {
            document.documentElement.className += (document.documentElement.className != '') ? ' images-on' : 'images-on';
        }
    };
    image.src = '/img/px.png';
}());

//toggle the filter menu
/*$("#f_tog").on("click", function(){
    $("#filters").slideToggle();
    $("#f_tog span").toggle();
});*/

// load the map data
$.getJSON("//civicliftmapeurope.azurewebsites.net/api/Listing", function(data) {

    //initialize the map
    var map = L.mapbox.map('map', 'ptw111.lgof8gop')
        .setView([40.5023056, -3.6704803], 14);

    //center marker on click
    map.markerLayer.on('click', function(e) {
        map.panTo(e.layer.getLatLng());
    });

    // Add custom popups to each using our custom feature properties
    map.featureLayer.on('layeradd', function(e) {
        var marker = e.layer,
            feature = marker.feature;

        //string functions, cleaning up geoJSON for display.

        //clean up address
        var addr;
        var zip = feature.properties.zip;

        if (feature.properties.addr) {
            addr = feature.properties.addr + ', ' + zip + '<br>' + feature.properties.city + ', Espa&ntilde;a';
        }

        //check for description
        var desc;

        if (feature.properties.description) {
            desc = feature.properties.description;
        } else {
            desc = '';
        }

        //check for phone numbers
        var phone;

        if (feature.properties.phone) {
            phone = '<strong>' + feature.properties.phone + '</strong>';
        } else {
            phone = '';
        }

        // create custom popup content
        var popupContent = '<div class="tooltip"><h2>' + feature.properties.name + '</h2>' +
            phone +
            '<div class="addr"><p>' +
            addr +
            '</p></div><span>' +
            desc +
            '</span></div>';

        // http://leafletjs.com/reference.html#popup
        marker.bindPopup(popupContent, {
            closeButton: false,
            minWidth: 150,
        });
    });

    // Add features to the map
    map.featureLayer.setGeoJSON(data);

    //filter locations by color/type
    var filters = document.getElementById('filters');
    var checkboxes = document.getElementsByClassName('filter');

    // When the form is touched, re-filter markers
       filters.onchange = change;
    // Initially filter the markers
       change();

});

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);
    }
    // The filter function takes a GeoJSON feature object
    // and returns true to show it or false to hide it.
    map.markerLayer.setFilter(function(f) {
        // check each marker's color to see if its value is in the list
        // of colors that should be on, stored in the 'on' array
        return on.indexOf(f.properties['marker-color']) !== -1;
    });
    return false;
}

Mapbox JS，来自URL的GeoJSON featureCollection对象只添加一个标记

1 个答案: