Leaflet layerGroup和Control；得到类型错误答案

【问题标题】：Leaflet layerGroup and Control; getting type errorLeaflet layerGroup和Control；得到类型错误
【发布时间】：2015-05-30 14:46:48
【问题描述】：

我正在自学 JavaScript，使用 Leaflet 创建一些简单的网络地图。这一步是将图层控件添加到地图中。我正在测试基础层和覆盖层的控制。

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

使用地图 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

编辑：进一步的测试让我认为我创建 layerGroups 的方式是错误的。我将地图更改为仅包含街道 tileLayer，并使用 .addTo(map) 子句添加了 layerGroups。

将 layerGroups 添加到地图时出现错误。

看来 layerGroups 想要一个数组。我用 .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
        }
}

【问题讨论】：

顺便说一句，我也很高兴获得有关我可以在 FF 调试器中查看问题的说明。我有兴趣了解有关如何调试的更多信息，就像修复当前错误一样。
halfer：首先，作为一个新论坛用户，我希望这是回应您意见的正确方式。我很感激花时间帮助我发布协议。一路上我很想删除所有最初发布的 JS 并完全替换它。这是个好主意还是坏主意？

标签： javascript leaflet

【解决方案1】：

您的添加层流程有点颠倒。

它们应该看起来像

    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

【讨论】：

谢谢。事实证明我遇到了数据问题（一些纬度/经度字段为 NULL。我确实将代码更改为您的建议，并且在修复了数据错误后，一切正常。最初的方法来自传单教程。我会还可以返回并重置为该代码以查看两者是否有效。再次感谢。

【解决方案2】：

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

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

感谢您的回答。它有助于我的 JS/Leaflet 学习。

【讨论】：