javascript - 传单 map - 删除标记图层组并添加另一个标记图层组

Question

我的目标是使用分页列表页面的图层组删除添加到传单的所有标记。导航到其他页面时，我可以删除上一页的图层组，但在添加新的标记图层组(标记下一页)我在浏览器中收到此错误，并且标记未添加到 map

错误是 - 未捕获的类型错误: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);

    }
}

上述代码的问题是在初始化 map 容器后首次调用 addMarkersList 时，它会起作用。 但是，当我在调用removeMarkerLayer删除现有标记层后使用新的标记列表(纬度长对)调用addMarkerList时，它给了我以下错误，我正在尝试调试。

Uncaught TypeError: layer.onAdd is not a function

请指出我做错的地方。

Answer 1

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

map.removeLayer(window.page_makers_layer);

不要不要使用窗口全局变量来存储对数据的引用(除非您真的、真的、真的确定自己在做什么)。如果您将 map 创建包装在工厂或模块中，请将数据存储在该范围内。

var leaflet_factory = {

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

研究常见的编程模式。您是否有一些内容只在网页中出现一次？考虑单例。

gives me following error which I am trying to debug.

你打算如何调试它？了解如何使用浏览器调试功能并提供完整的堆栈跟踪。

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