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

Question

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

我们正在尝试将 URL 端点放在一起，以从 mysql 数据库而不是 CSV 获取 geoJSON。

这张地图，http://lastablaslift.es/explorador/map_test.php，是一样的，但使用了我们 URL 的 geoJSON。

似乎我们已经得到 URL 返回格式正确的 GeoJSON，但如您所见，只有 "features" 数组中的第一个对象被呈现在 map_test.php

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

Answer 1

看到这个 JSFiddle example.I 认为会有与 function change() {} 相关的问题，你放在 $.getJSON 成功函数中。试着把它放在外面。你的map_jsonurl.js应该是这样的，

(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;
}

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

Mapbox JS, GeoJSON featureCollection object from URL only adds one marker

javascript

mapbox