Mapbox JS，GeoJSON featureCollection对象仅添加一个标记

问题描述：

此地图http://lastablaslift.es/explorador/正在通过csv2geojson插件加载本地CSV文件，以便为其添加一些带有弹出窗口的标记。Mapbox JS，GeoJSON featureCollection对象仅添加一个标记

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

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

好像我们已经拿到了URL返回格式正确GeoJSON的，但你可以看到，只有在“功能”的第一个对象数组正在对map_test.php呈现

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

答

看到这个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，GeoJSON featureCollection对象仅添加一个标记

相关推荐