Javascript 小叶层组和对照组；获取类型错误

我在自学JavaScript，使用传单创建一些简单的网络地图。此步骤是向地图添加图层控制。我正在测试基础层和覆盖层的控制

我得到一个JS类型的错误。我使用了一些调试，但找不到我做错了什么

使用Map API的“层”选项时会发生错误。如果删除该选项，则不会发生错误（很明显，映射不起作用，所以只需完成调试）

在Firefox中使用调试器，覆盖层组的内容看起来正常。我希望能再多看一眼

// Creates a variable to hold the attribution including OSM, Creative Commons license,and Mapbox imagery; this is done via variable because two tileLayers will each need attribution
    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

    var grayscale = L.tileLayer(mbUrl, {id: 'examples.map-20v6611k', attribution: mbAttr}),
        streets = L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7',   attribution: mbAttr});

// var myURL = jQuery( 'script[src$="kcdfp.js"]' ).attr( 'src' ).replace( 'kcdfp.js', '' );  // Gets the URL and removes the file name, which will be replaced in the icon API; can't get it to work
    var myURL = 'http://www.myspatialhome.org/';  // Sets the url for icon images

// Criteria for overlay layers
// In Active -1=YES, 0 = NO
// Create new layerGroups for overlay
    var active = new L.layerGroup();
    var inactive = new L.layerGroup();

// Create Marker icons
    var myIcon = L.icon({
    iconUrl: myURL + 'images/pin24.png',
    iconRetinaUrl: myURL + 'images/pin48.png',
    iconSize: [29, 24],
    iconAnchor: [9, 21],
    popupAnchor: [0, -14]
});

// Loop through the entire JSON file
for ( var i=0; i < kcdfp.length; ++i ) 
    {
    if (kcdfp[i].In_Active == 0){  // Inactive=no, i.e. Active
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addTo( active );  // Add to active layer group
    }
    else {  // Otherwise show a Inactive
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addTo( inactive );  // Add to inactive layer group
        }
}

// Create the map
var map = L.map( 'map', {
        center: [47.5, -121.95],
        minZoom: 10,
        zoom: 10,
        layers: [streets, active, inactive]  // ERROR
});
// Set variables for layer control
    var baseLayers = {
        "Grayscale": grayscale,
        "Streets": streets
    };
    var overlays = {
        "Active": active,
        "Inactive": inactive
    };  // Sets the other variable for layer control

    L.control.layers(baseLayers, overlays).addTo(map);  // Adds a layer control to the map

//创建一个变量来保存属性，包括OSM、Creative Commons许可证和Mapbox图像；这是通过变量完成的，因为两个TileLayer都需要属性
var mbAttr='地图数据和副本；贡献者，'+
', ' +
“图像”，
mbUrl='https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'；
var grayscale=L.tileLayer（mbUrl，{id:'examples.map-20v6611k'，属性：mbAttr}），
streets=L.Tillelayer（mbUrl，{id:'examples.map-i875mjb7'，属性：mbAttr}）；
//var myURL=jQuery（'script[src$=“kcdfp.js”]'）。attr（'src'）。replace（'kcdfp.js'，''）；//获取URL并删除文件名，该文件名将在图标API中替换；不能让它工作
var myURL='1〕http://www.myspatialhome.org/';  // 设置图标图像的url
//覆盖层的标准
//在活动状态下-1=是，0=否
//为覆盖创建新的图层组
var active=新的L.layerGroup（）；
var inactive=新的L.layerGroup（）；
//创建标记图标
var myIcon=L.icon({
iconUrl:myURL+'images/pin24.png'，
iconRetinaUrl:myURL+'images/pin48.png'，
iconSize:[29,24]，
iconAnchor:[9,21]，
popupAnchor:[0，-14]
});
//循环遍历整个JSON文件
对于（变量i=0；i

---

编辑：进一步的测试让我认为我创建图层组的方式是错误的。我将地图更改为仅包含街道瓷砖层，并使用.addTo（Map）子句添加了图层组

将图层组添加到地图时，会出现错误

图层组似乎需要一个数组。我用.addLayer子句更改了标记。layerGroup是否将其视为数组元素

// Loop through the entire JSON file
for ( var i=0; i < kcdfp.length; ++i ) 
    {
    if (kcdfp[i].In_Active == 0){  // Inactive=no, i.e. Active
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addLayer( active );  // Add to active layer group
    }
    else {  // Otherwise show a Inactive
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addLayer( inactive );  // Add to inactive layer group
        }
}

//遍历整个JSON文件
对于（变量i=0；i

您的添加层流程有点颠倒

它们应该看起来像

    var newMarker = L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} ).bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
    active.addLayer(newMarker);  // Add to active layer group

var newMarker=L.marker（[kcdfp[i].Lat，kcdfp[i].Lon]，{icon:myIcon}）.bindpoppup（“”）
active.addLayer（newMarker）；//添加到活动图层组

根本问题是数据错误（即lat/lon NULL）。测试包括原始JS和根据建议的答案修改的JS，该答案将“var newMarker”添加到L.marker API中。原始JS基于传单教程6

我很好奇，选择一种方法是否比另一种有优势

---

谢谢你的回答。这有助于我学习JS/传单。

顺便说一句，我也希望得到关于我可以在FF调试器中查找问题的说明。哈弗：首先，作为一个新的论坛用户，我希望这是回应你输入的正确方式。我很感激花时间来帮助我发布协议。我很想删除所有最初发布的JS并完全替换它。这是个好主意还是个坏主意？谢谢。事实证明我有一个数据问题（一些lat/lon字段为空。我确实根据您的建议更改了代码，并且在修复了数据错误后，一切正常。最初的方法来自传单教程。我还将返回并重置该代码，以查看两者是否正常。再次感谢。