Question

我的目标是使用图层组为分页列表页面删除添加到传单的所有标记。当导航到其他页面时，我能够删除上一页的图层组，但是添加了新的图层组标记（标记）下一页）我在浏览器中收到此错误，标记未添加到地图

错误是 - 未捕获TypeError：layer.onAdd不是函数;

代码是

var leaflet_factory = {
    //initializing map container
    initialize: function() {
        var map = L.map('mapresults');
        var googleLayer = new L.Google('ROADMAP');
        map.addLayer(googleLayer);
    },

    //set view of mao
    setview: function(lat, long, zoom) {

        map.setView([lat, long], zoom);

    },

    //add list of markers to maps

    addMarkersList: function(marker_array) {
        var markerArray = [];
        $.each(marker_array, function(key, data) {
            var marker_pointer = L.marker([data.lat, data.long]).bindPopup('<a href="/' + $(this).attr('data-slug') + '"><strong>' + $(this).attr('data-vendor').capitalize() + '</strong><br></a>' + $(this).attr('data-location').capitalize());
            markerArray.push(marker_pointer);
        });
        window.page_makers_layer = L.layerGroup(markerArray);
        window.page_makers_layer.addTo(map);

    },

    //remove the current marker layer group

    removeMarkerLayer: function() {

        map.removeLayer(window.page_makers_layer);

    }
}

上面代码的问题是在初始化地图容器后第一次调用addMarkersList时。但是当我在调用removeMarkerLayer删除现有标记层后调用带有新标记列表（lat long pair）的addMarkerList时，它会给出我正在尝试调试的跟随错误。

Uncaught TypeError: layer.onAdd is not a function

请指出我做错的地方。

Answer 1

你做错了一些事。不是灾难性错误，只是反模式错误，例如：

map.removeLayer(window.page_makers_layer);

NOT 使用窗口全局变量来存储对数据的引用（除非你真的，真的，非常确定你在做什么）。如果要在工厂或模块中包装地图创建，请将数据存储在该范围内。

var leaflet_factory = {

如果工厂不遵循factory pattern，请不要将工厂命名。它非常令人困惑。只是以不同的名称命名，改为将其改为CJS模块，或者完全跳过它。

研究常见的编程模式。你有什么东西只在网页上出现过一次吗？考虑单身人士。

给出了我正在尝试调试的错误。

您是如何尝试调试的？学习使用浏览器调试功能，并提供完整的堆栈跟踪。

您应该能够轻松跟踪有问题的变量的值，并在调用时查看它是否是L.LayerGroup的实例。

小册子贴图 - 删除标记图层组并添加另一个标记图层组

1 个答案: